Solved

Rollover button and Frames Pages

Posted on 2001-07-25
10
197 Views
Last Modified: 2013-12-24
Frontpage 2000 on Windows 98se

I have a website at http://johnwille.com  It has 4 border frames and a main frame.  In the "content" frame is where my navigation is.  Currently I have just plain ordinary graphics as the links.  I would like to use a hover button.  Everytime I have tried using the Instert>>Component>>Hover Button function I can add the rollover effect I want no problem.  The problem lies with the link itself.  I cannot get the link to open the page in the "main" frame.  It always opens in full page.  I have made sure the default target frame for links is main.  I do not code in HTML and that is why I am using FP2K.  I am a strictly wysiwyg operator for the moment.

Here is the HTML for the page:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>FPC of Philadelphia</title>
<base target="main">
</head>

<body background="Images/FPC_LftSlc.jpg">

<table border="0" width="125" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Main.htm"><img border="0" src="Images/Buttons/BtnHome_Ylw.gif" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Jobs/Jobs.htm"><img border="0" src="Images/Buttons/BtnJob_1.gif" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Links.htm"><img border="0" src="Images/Buttons/BtnLinks_1.gif" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Contact.htm"><img border="0" src="Images/Buttons/BtnContact_1.gif" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="100%" height="*">
      <applet code="fphover.class" codebase="./" width="115" height="35">
        <param name="color" value="#000080">
        <param name="hovercolor" value="#0000FF">
        <param name="textcolor" value="#FFFFFF">
        <param name="effect" value="glow">
        <param name="image" valuetype="ref" value="Images/Buttons/BtnHome_1.gif">
        <param name="hoverimage" valuetype="ref" value="Images/Buttons/BtnHome_Ylw.gif">
        <param name="url" valuetype="ref" value="Jobs/Jobs.htm">
      </applet>
    </td>
  </tr>
  <tr>
    <td width="100%" valign="bottom" align="left" height="125"><img border="0" src="Images/FPC_BtmLftCrnr.jpg" width="150" height="125"></td>
  </tr>
</table>

</body>

</html>


Thank you for your help:
0
Comment
Question by:pdevans
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6319397
Nice site!  Best use of frames I've ever seen and I usually warn people away from them...especially people who don't use HTML.

You should be VERY proud.

With that out of the way......

It is just the hover button causing the problem...right?
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6319458
Unfortunately, using the FP Hover, you cannot specify the target and the applet does not recognize the page default.

Your only other option would involve NOT using the Fphoverclass and doing it in HTML mode..which you do not want to do.
0
 

Author Comment

by:pdevans
ID: 6319804
Thank you very much.  I took me a while to figure out the frames.  There isnt much out there on them.  At the moment there are two problems.  One is the hover button here.  the other is in another question also worth 200 points.

Why do I NOT want to do it in html?  Does is cause other problems?  

I tried to use a hover button that I made in ImageReady 2.0, unfortunately I could not get the button to work properly at all.  When I placed it on the page the first button would show up, but on a mouse-over it would return an error.  Granted, I did not do a lot of research into this area.  Would this be a better path to persue?

Is the long and short of this answer that a Hoverbutton would not be a good idea?

Thank for your time,
Dan
0
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
LVL 7

Accepted Solution

by:
ClassyLinks earned 200 total points
ID: 6319917
Correct.  fp's hover buttons are a PITA.

You said in your question: I do not code in HTML and that is why I am using FP2K.  I am a strictly wysiwyg operator for
the moment.


Are you willing to let me help you do this in HTML mode?  I promise I will hold your hand.
0
 

Author Comment

by:pdevans
ID: 6319978
I am very willing to be helped in this project.  I love learning new things and am very good student.  We can continue this ia email if you like.  pdevans@ptd.net

Thank you,
Dan
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6320010
Technically, we have to continue it here.  EE rules.  Then others benefit from our workings.

However....it is easier to pass pages back and forth by email.  We can do that, but need to post the final solution here.

We should combine your two questions in any case because these rollovers will need to start the Javascript you will use to change the two frames content..

I'll take care of posting back here.
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6320015
The script we will use for the hovers comes from:

http://www.simplythebest.net/info/dhtmscript24.html
0
 

Author Comment

by:pdevans
ID: 6321968
Here is the code segments your link sent me too  First is the rollover javascript followed by an HTML segment.

<script LANGUAGE="JavaScript">
<!--
// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
if (document.images) {
//Leftbar images  
  img01 = new Image();
  img01.src = "img01.gif";
  img012 = new Image();
  img012.src = "img01on.gif";
  img02 = new Image();
  img02.src = "img02.gif";
  img022 = new Image();
  img022.src = "img02on.gif";
}
function OnImage(name) {
     if (document.images) {
          fullname = eval(name + "2");
          document[name].src = fullname.src;
     }
}
function OffImage(name) {
  if (document.images) {
    fullname = eval(name);
     if (fullname.complete) {
      document[name].src = fullname.src;
     }
  }
}
//-->
</script>



<a href="http://simplythebest.net" ONMOUSEOVER="OnImage('company');" ONMOUSEOUT="OffImage('company');"><img name="company" src="dscript24/company.gif" border="0" width="69" height="21"></a>

Whew, looks like greek to me, but lets see how well I speak greek.

In the Javascript Segment:

?If (document.images) {
img01 = new Image();
img01.src = "img01.gif";
img012 = new Image();
img012.src = "img01on.gif";
img02 = new Image();
img02.src = "img02.gif";
img022 = new Image();
img022.src = "img02on.gif";  
}  This tell the java to work if it hits these particular images

? function OnImage(name) {
     if (document.images) {
          fullname = eval(name + "2");
          document[name].src = fullname.src;
     }
}  This is the OnImage Function, called by the HTML below.  It specifies replacing the image by telling it to add a ?2? the the and of the name:  Replaces img01.src with img012.src etc?

? function OffImage(name) {
  if (document.images) {
    fullname = eval(name);
     if (fullname.complete) {
      document[name].src = fullname.src;
     }
  }
}  This is the OffImage function call by the HTML code below.  It specifies putting the image back to its original state.


In the HTML segment at the bottom:

? <a href=http://simplythebest.net starts the html and set the link the button refers to.

? ONMOUSEOVER=?OnImage(?company?);?  calls the OnImage JavaScript for the graphic named ?company?.  This displays the modifid graphic.

? ONMOUSEOUT=?OffImage(?company?);? Call the OffImage JavaScript for the graphic named ?company?.  This returns the graphic to the original state.

? Src=?dscript24/company.gif?  tells the JavaScript what to replace the variable src with?  (that is a wild guess)

? Border=?0? width=?69? height=?21></a>  Specifoes the border, height, and width of the image, and close the html segment.
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6322045
You've got it exactly.

The key is naming your images in the <a href section and mathing them in the Head section with name1 and name2.  Name1 being the "normal" image and Name2 being the hovered.
0
 

Author Comment

by:pdevans
ID: 6322744
GREAT!!!  I finished coding.  Take a look at http://www.johnwille.com  Here is what the HTML looks like now.  Thnak you so much for all of your help.  This is wonderful.

-Dan

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>FPC of Philadelphia</title>
<base target="main">
<script LANGUAGE="JavaScript">
<!--
if (document.images) {
     jobs = new Image();
     jobs.src = "Images/Buttons/BtnJobs_1.gif";
     jobs2 = new Image();
     jobs2.src = "Images/Buttons/BtnJobs_Ylw.gif";
     links = new Image();
     links.src = "Images/Buttons/BtnLinks_1.gif";
     links2 = new Image();
     links2.src = "Images/Buttons/BtnLinks_Ylw.gif";
     contact = new Image();
     contact.src = "Images/Buttons/BtnContact_1.gif";
     contact2 = new Image();
     contact2.src = "Images/Buttons/BtnContact_Ylw.gif";
}
function OnImage(name) {
     if (document.images) {
          fullname = eval (name + "2");
          document[name].src = fullname.src;
     }
}
function OffImage(name) {
     if (document.images) {
          fullname = eval(name);
          if (fullname.complete) {
               document[name].src = fullname.src;
          }    
     }
}
function loadFrames(frame1,page1,frame2,page2) {
     eval("parent."+frame1+".location='"+page1+"'");
     eval("parent."+frame2+".location='"+page2+"'");
}
//-->
</script>
</head>

<body background="Images/FPC_LftSlc.jpg">

<table border="0" width="125" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td width="125" height="35" valign="top" align="center"><img border="0" src="Images/Buttons/BtnHome_Ylw.gif" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Jobs/Jobs.htm" ONMOUSEOVER="OnImage('jobs');" ONMOUSEOUT="OffImage('jobs');"><img name="jobs" src="Images/Buttons/BtnJobs_1.gif" border="0" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Links.htm" ONMOUSEOVER="OnImage('links');" ONMOUSEOUT="OffImage('links');"><img name="links" src="Images/Buttons/BtnLinks_1.gif" border="0" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="125" height="35" valign="top" align="center"><a href="Contact.htm" ONMOUSEOVER="OnImage('contact');" ONMOUSEOUT="OffImage('contact');"><img name="contact" src="Images/Buttons/BtnContact_1.gif" border="0" width="115" height="35"></a></td>
  </tr>
  <tr>
    <td width="100%" height="*">
    </td>
  </tr>
  <tr>
    <td width="100%" valign="bottom" align="left" height="125"><img border="0" src="Images/FPC_BtmLftCrnr.jpg" width="150" height="125"></td>
  </tr>
</table>

</body>

</html>
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question