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?

Code:

<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:

Code:

<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:

Code:

<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>
 </FONT><p> </TD>
<TD WIDTH="641" HEIGHT="386" VALIGN="TOP" bordercolor="#FFFFFF">
 </TD>
</TR>
<tr>
<TD WIDTH="641" HEIGHT="195" VALIGN="TOP" bgcolor="#003399">
<br>
        &n bsp;       &nbs p;    
<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

**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?

Thread: Mouse Over Menu

Thread Tools

Rate This Thread

Mouse Over Menu

Similar Threads

Top menu here at WSP

IMG COORDS img menu

HTML mouse over menu

Bookmarks

Bookmarks

Posting Permissions