Rollover navigation bar with 2 images
I promised yesterday to post my trick to create an easy navigation bar with only two images.
When you have a basic navigation bar with multiple images, it can make the web page very heavy if you have to preload a lot of multiple images to do a rollover with every image.
In this example, I have 8 buttons, so that's means 16 images to have a rollover effect with mouse over and mouse out.
So what you can do is to prepare your navigation bar with Photoshop or ImageReady or Paintshop Pro.
You create the two bar states like this with an imagemap for each button:
And
Now for the code, you can do something like this:
<SCRIPT LANGUAGE="JavaScript">
<!--
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NS4) ? 1 : 0;
if (ver4) {
secondIm = "<IMG SRC='Nav_top/navtop_on.gif' USEMAP='#Navtop' WIDTH=280 HEIGHT=35 BORDER=0>";
arPopups = new Array()
}
else { secondIm = "" }
function setBeginEnd(which,from,to) {
arPopups[which] = new Array();
arPopups[which][0] = from;
arPopups[which][1] = to;
}
if (ver4) {
setBeginEnd(1,0,34);
setBeginEnd(2,35,69);
setBeginEnd(3,70,104);
setBeginEnd(4,105,139);
setBeginEnd(5,140,174);
setBeginEnd(6,175,209);
setBeginEnd(7,210,244);
setBeginEnd(8,245,279);
}
clTop = 0;
clBot = 35;
function mapOver(which,on) {
if (!ver4) { return }
if (IE4) { whichEl = document.all.elMenuOver.style
detailEl = eval("document.all.elDetails" + which + ".style")
}
else { whichEl = document.elMenu.document.elMenuOver
detailEl = eval("document.elMenu.document.elDetails" + which)
};
if (!on) { whichEl.visibility = "hidden";
detailEl.visibility = "hidden";
return
}
clLeft = arPopups[which][0];
clRight = arPopups[which][1];
if (NS4) {
whichEl.clip.left = clLeft;
whichEl.clip.right = clRight;
}
else {
whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
}
whichEl.visibility = "visible";
detailEl.visibility = "visible";
}
//-->
</SCRIPT>
<table border="0" cellpadding="0" cellspacing="0" height="60" width="341" bgcolor="#ffffff" align=right>
<tr>
<td rowspan="3" width="20" height="35"><IMG SRC="images/spacer.gif" height="35" width="20"></td>
<td rowspan="3" colspan="8" width="280" height="35" valign="top">
<div ID="elMenu">
<div ID="elMenuUp">
<IMG SRC="Nav_top/navtop_off.gif" WIDTH=280 HEIGHT=35 BORDER=0 USEMAP="#Navtop">
</div>
<div ID="elMenuOver">
<SCRIPT LANGUAGE="JavaScript">document.write(secondIm)</SCRIPT>
</div>
<DIV ID="elDetails1" CLASS=details>Research</DIV>
<DIV ID="elDetails2" CLASS=details>Risks of Smoking</DIV>
<DIV ID="elDetails3" CLASS=details>Help</DIV>
<DIV ID="elDetails4" CLASS=details>Health Professionals</DIV>
<DIV ID="elDetails5" CLASS=details>Quit mail</DIV>
<DIV ID="elDetails6" CLASS=details>Testimonials</DIV>
<DIV ID="elDetails7" CLASS=details>Faq</DIV>
<DIV ID="elDetails8" CLASS=details>Postcards</DIV>
</div>
</td>
<td width="41" height="20" bgcolor="#ffffff" colspan="2">
<IMG SRC="images/spacer.gif" width="41" height="20"></td>
</tr>
<tr>
<td width="41" colspan="2" bgcolor="#ff9900" height="1" align="right"><IMG SRC="images/spacer.gif" height="1" width="41"></td>
</tr>
<tr><td width="40" height="19" bgcolor="#ffffff"><IMG SRC="images/spacer.gif" height="19" width="40"></td>
<td width="1" bgcolor="#ff9900" rowspan="2" align="right"><IMG SRC="images/spacer.gif" height="100%" width="1"></td></tr>
<tr><td colspan="10" height="21" valign"top"><IMG SRC="images/spacer.gif" name="btxt" width="327" height="21"></td></tr></table>
<MAP NAME="Navtop">
<AREA SHAPE="rect" ALT="" COORDS="0,0,34,34" HREF="research.asp"
onMouseOver="mapOver(1,true)" onMouseOut="mapOver(1,false)">
<AREA SHAPE="rect" ALT="" COORDS="35,0,69,34" HREF="risks.asp"
onMouseOver="mapOver(2,true)" onMouseOut="mapOver(2,false)">
<AREA SHAPE="rect" ALT="" COORDS="70,0,104,34" HREF="cycle.asp"
onMouseOver="mapOver(3,true)" onMouseOut="mapOver(3,false)">
<AREA SHAPE="rect" ALT="" COORDS="105,0,139,34" HREF="health.asp"
onMouseOver="mapOver(4,true)" onMouseOut="mapOver(4,false)">
<AREA SHAPE="rect" ALT="" COORDS="140,0,174,34" HREF="quitmail.asp"
onMouseOver="mapOver(5,true)" onMouseOut="mapOver(5,false)">
<AREA SHAPE="rect" ALT="" COORDS="175,0,209,34" HREF="testimonials.asp"
onMouseOver="mapOver(6,true)" onMouseOut="mapOver(6,false)">
<AREA SHAPE="rect" ALT="" COORDS="210,0,244,34" HREF="faq.asp"
onMouseOver="mapOver(7,true)" onMouseOut="mapOver(7,false)">
<AREA SHAPE="rect" ALT="" COORDS="245,0,279,34" HREF="postcard.asp"
onMouseOver="mapOver(8,true)" onMouseOut="mapOver(8,false)">
</MAP>
You can see in my code that I used this quite a while ago, with links to ASP pages but it's of course possible to convert this as a .Net user control.
I like using Photoshop for Imagemaps because it can create a nice HTML export page with all the imagemap tags and coordinates automatically.
This code is working fine with Netscape 4+ and IE 4 +