Solved

Rollover button and Frames Pages

Posted on 2001-07-25
10
187 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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 
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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

Suggested Solutions

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
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…

809 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