Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 208
  • Last Modified:

Rollover button and Frames Pages

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
pdevans
Asked:
pdevans
  • 6
  • 4
1 Solution
 
ClassyLinksCommented:
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
 
ClassyLinksCommented:
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
 
pdevansAuthor Commented:
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
NEW Veeam Backup for Microsoft Office 365 1.5

With Office 365, it’s your data and your responsibility to protect it. NEW Veeam Backup for Microsoft Office 365 eliminates the risk of losing access to your Office 365 data.

 
ClassyLinksCommented:
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
 
pdevansAuthor Commented:
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
 
ClassyLinksCommented:
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
 
ClassyLinksCommented:
The script we will use for the hovers comes from:

http://www.simplythebest.net/info/dhtmscript24.html
0
 
pdevansAuthor Commented:
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
 
ClassyLinksCommented:
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
 
pdevansAuthor Commented:
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now