PDA

View Full Version : Mouse Over Menu


Kevin
07-03-2003, 08:45 PM
I am a newbie to web design so be easy on me..lol I am trying to do a javascript mouseover horizontal menu. So far, I got one mouseover picture swap to work but I can’t figure out how to add the next six in the row.

Here is a part of my code

</TR>
<TR bgcolor="#336699">
<TD HEIGHT="26" COLSPAN="2" ALIGN="RIGHT" bgcolor="#FFFFFF" width="770" bordercolor="#6666CC" valign="top">
<p align="left">

<a href="index.htm"
onMouseOver="change('images/c1g.gif');"
onMouseOut="change('images/1.jpg')">
<font face="Arial" style="font-size: 1pt">

<img src="images/1.jpg" name="picture" border="0" src="images/1.jpg" width="156" height="26"></font></TD>


Help!
Chris
07-04-2003, 07:43 AM
And here is the rest right?



<script language="Javascript">
function change (picurl) {
document.picture.src = picurl;
}
image1 = new Image();
image1.src = "images/about_on.jpg";
</script>
Chris
07-04-2003, 07:51 AM
The problem is that your javascript function is utilizing a very specific picture.

The line "document.picture.src" is accessing the source of the "picture" image. If you have a second image, say "picture2" then you'd need to change that line of the function.

Here is a better way to do it.

First preload your images like so:



<script language = "javascript">
image0 = new Image();
image0.src = "images/file1.jpg";


image1 = new Image();
image1.src = "images/file2.jpg";


image2 = new Image();
image2.src = "images/file3.jpg";
</script>


That goes in the head of your document (between the <head> tags).

Then make your links like this:


<a href="file.html" onmouseover="image0.src='images/file1-2.jpg';"
onmouseout="image0.src='images/file1.jpg';">
<img name="image0" src="images/file1.jpg" border=0>

<a href="file2.html" onmouseover="image1.src='images/file2-2.jpg';"
onmouseout="image1.src='images/file2.jpg';">
<img name="image1" src="images/file2.jpg" border=0>


You aren't actually using a function in this example -- but you don't need to.
Kevin
07-05-2003, 12:08 AM
to begin I want to thank you very much. I am getting an error but you have helped my to the next level of mouseover menus.

Here is my code from the top to the end of the menu. I'm getting an error and I don't know why.

<html>
<head>
<title>Put title here</title>
<meta name="Affilliates" content="tags">
<meta name="Keywords" content="tags">
<meta name="Description" content="tags">
<script language = "javascript">
image0 = new Image(off1.jpg);
image0.src = "images/off1.jpg";
image1 = new Image(off2.jpg);
image1.src = "images/off2.jpg";
image2 = new Image(off3.jpg);
image2.src = "images/off3.jpg";
image3 = new Image(off4.jpg);
image3.src = "images/off4.jpg";
image4 = new Image(off5.jpg);
image4.src = "images/off5.jpg";
</script>
</head>

<BODY BGCOLOR="#6699FF" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
<div align="center">
<center>

<a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';">


<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" height="696" width="770" style="border-collapse: collapse" bordercolor="#111111">
<TR bgcolor="#6666CC">
<TD HEIGHT="115" COLSPAN="2" background="krbackgroundblue.jpg" bgcolor="#003399" valign="bottom" align="left" width="770" bordercolor="#EFE0D1">
<img border="0" src="headercomplete12.jpg" width="770" height="115"></TD>
</TR>
<TR bgcolor="#336699">
<TD HEIGHT="22" COLSPAN="2" ALIGN="RIGHT" bgcolor="#003399" width="770" bordercolor="#6699FF" valign="top" style="border-top-style: solid; border-top-width: 1">
<p align="left">

<a href="index.htm" onmouseover="image0.src='images/on1.jpg';"
onmouseout="image0.src='images/off1.jpg';">
<img name="image0" src="images/off1.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image1.src='images/on2.jpg';"
onmouseout="image1.src='images/off2.jpg';"><img name="image1" src="images/off2.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image2.src='images/on3.jpg';"
onmouseout="image2.src='images/off3.jpg';"><img name="image2" src="images/off3.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image3.src='images/on4.jpg';"
onmouseout="image3.src='images/off4.jpg';"><img name="image3" src="images/off4.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';"><img name="image4" src="images/off5.jpg" border=0 width="154" height="22"></TD>
</TR>
Chris
07-05-2003, 02:30 PM
The first thing you need to do is fix the pre-loading code.

image4 = new Image(off5.jpg);
image4.src = "images/off5.jpg";

Is incorrect, it should look like this:

image4 = new Image();
image4.src = "images/off5.jpg";

The Image() function can optionally take arguments for dimensions, but they're not needed.
Kevin
07-05-2003, 04:45 PM
Oh...that makes sense.

I made the corrections and the error message has stopped. The first four menu buttons are working great; however, the 5th button actives when the mouse enters anywhere on the TABLE. I've tried to figure out my error but it escapes me.

Here is the revised code:

<script language = "javascript">
image0 = new Image();
image0.src = "images/off1.jpg";
image1 = new Image();
image1.src = "images/off2.jpg";
image2 = new Image();
image2.src = "images/off3.jpg";
image3 = new Image();
image3.src = "images/off4.jpg";
image4 = new Image();
image4.src = "images/off5.jpg";
</script>
</head>

<BODY BGCOLOR="#6699FF" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
<div align="center">
<center>

<a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';">


<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" height="696" width="770" style="border-collapse: collapse" bordercolor="#111111">
<TR bgcolor="#6666CC">
<TD HEIGHT="115" COLSPAN="2" background="krbackgroundblue.jpg" bgcolor="#003399" valign="bottom" align="left" width="770" bordercolor="#EFE0D1">
<img border="0" src="headercomplete12.jpg" width="770" height="115"></TD>
</TR>
<TR bgcolor="#336699">
<TD HEIGHT="22" COLSPAN="2" ALIGN="RIGHT" bgcolor="#003399" width="770" bordercolor="#6699FF" valign="top" style="border-top-style: solid; border-top-width: 1">
<p align="left">

<a href="index.htm" onmouseover="image0.src='images/on1.jpg';"
onmouseout="image0.src='images/off1.jpg';">
<img name="image0" src="images/off1.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image1.src='images/on2.jpg';"
onmouseout="image1.src='images/off2.jpg';"><img name="image1" src="images/off2.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image2.src='images/on3.jpg';"
onmouseout="image2.src='images/off3.jpg';"><img name="image2" src="images/off3.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image3.src='images/on4.jpg';"
onmouseout="image3.src='images/off4.jpg';"><img name="image3" src="images/off4.jpg" border=0 width="154" height="22"><a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';"><img name="image4" src="images/off5.jpg" border=0 width="154" height="22"></TD>
</TR>
<TR>
<TD VALIGN="TOP" WIDTH="156" HEIGHT="581" rowspan="2">
<FONT FACE="arial" COLOR="#FFFFFF" SIZE="+1"><br>
&nbsp;</FONT><p>&nbsp;</TD>
<TD WIDTH="641" HEIGHT="386" VALIGN="TOP" bordercolor="#FFFFFF">
&nbsp;</TD>
</TR>
<tr>
<TD WIDTH="641" HEIGHT="195" VALIGN="TOP" bgcolor="#003399">
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="gnfheader1.jpg" width="428" height="111"></TD>
</tr>
</TABLE>
</center>
</div>
</BODY>
</html>
Chris
07-05-2003, 05:07 PM
You aren't closing your link tags..

You need to have your code formatted like this:

<a><img></a>

(obviously thats short hand)

currently you're leaving out the trailing </a>
Kevin
07-05-2003, 05:59 PM
Right after I posted my third posting, I discovered that I had pasted the below code twice. Which made the 5th menu button freak.

<a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';">

By erasing it, the menu works fine now.


I am confused because I am still leaving out the trailing <a/> but the menu is working fine. Does this have something to do with frontpage?
Chris
07-05-2003, 07:58 PM
No, it has to do with some browsers being more forgiving. You should put in the trailing </a>, otherwise its improper code and may not render correctly for some browsers or for search engines.

Link tags should always have closing tags.
Kevin
07-05-2003, 09:13 PM
I must not be putting it in the right place, so here is the $64,000 question. Could you illustrate, using my previously posted code, where I place the <a/> ?
Chris
07-06-2003, 07:49 AM
<a href="index.htm" onmouseover="image4.src='images/on5.jpg';"
onmouseout="image4.src='images/off5.jpg';"><img tag here></a>
Kevin
07-06-2003, 10:33 AM
When I put the </a> there my menu goes crazy. What am I missing?
Chris
07-06-2003, 12:56 PM
What do you mean by "goes crazy?" What happens specifically?
Kevin
07-06-2003, 05:08 PM
The .jpg’s get out of alignment
Chris
07-06-2003, 06:55 PM
That doesn't make alot of sense.. is the site published somewhere where I could see it?
Kevin
07-06-2003, 08:23 PM
It will be in a couple of weeks...I will notify email you.

I appreciate all your help. Thank you!