Solved

Rollover button and Frames Pages

Posted on 2001-07-25
10
178 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now