|
home > real world > web resource > web source codes >
The following code is for 10 images. For demonstration purposes I loaded only 2 images with this page.
STEP 1/2: Copy this code into the <HEAD> of your HTML document:
<HEAD>
<script LANGUAGE="Javascript">
toc1on = new Image();
toc1on.src = "bar0201.gif";
toc2on = new Image();
toc2on.src = "bar0202.gif";
toc3on = new Image();
toc3on.src = "bar0203.gif";
toc4on = new Image();
toc4on.src = "bar0204.gif";
toc5on = new Image();
toc5on.src = "bar0205.gif";
toc6on = new Image();
toc6on.src = "bar0206.gif";
toc7on = new Image();
toc7on.src = "bar0207.gif";
toc8on = new Image();
toc8on.src = "bar0208.gif";
toc9on = new Image();
toc9on.src = "bar0209.gif";
toc10on = new Image();
toc10on.src = "bar02090.gif";
toc1off = new Image();
toc1off.src = "bar021.gif";
toc2off = new Image();
toc2off.src = "bar022.gif";
toc3off = new Image();
toc3off.src = "bar023.gif";
toc4off = new Image();
toc4off.src = "bar024.gif";
toc5off = new Image();
toc5off.src = "bar025.gif";
toc6off = new Image();
toc6off.src = "bar026.gif";
toc7off = new Image();
toc7off.src = "bar027.gif";
toc8off = new Image();
toc8off.src = "bar028.gif";
toc9off = new Image();
toc9off.src = "bar029.gif";
toc10off = new Image();
toc10off.src = "bar0290.gif";
function img_act(imgName) {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
function img_inact(imgName) {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
</script>
</HEAD>
STEP 2/2: Put this code into the <BODY> of your HTML document:
<A HREF="elves.html" onMouseover="img_act('toc1')" onMouseout="img_inact('toc1')">
<IMG border=0 name="toc1" SRC="bar021.gif" ALT="More about Elves">
</A>
<A HREF="jokes.html" onMouseover="img_act('toc2')" onMouseout="img_inact('toc2')">
<IMG border=0 name="toc2" src="bar022.gif" alt="Jokes Page">
</A>
<A HREF = "art.html" onMouseover = "img_act('toc3')" onMouseout = "img_inact('toc3')">
<IMG border=0 name="toc3" src="bar023.gif" alt="Art page">
</A>
<A HREF = "texts.html" onMouseover = "img_act('toc4')" onMouseout = "img_inact('toc4')">
<IMG border=0 name="toc4" src="bar024.gif" alt="Texts page">
</A>
<A HREF = "cv.html" onMouseover = "img_act('toc5')" onMouseout = "img_inact('toc5')">
<IMG border=0 name="toc5" src="bar025.gif" alt="My CV">
</A>
<A HREF="product.html" onMouseover="img_act('toc6')" onMouseout="img_inact('toc6')">
<IMG border=0 name="toc6" SRC="bar026.gif" ALT="Product page">
</A>
<A HREF="links.html" onMouseover="img_act('toc7')" onMouseout="img_inact('toc7')">
<IMG border=0 name="toc7" src="bar027.gif" alt="Links page">
</A>
<A HREF = "links.html#1" onMouseover = "img_act('toc8')" onMouseout = "img_inact('toc8')">
<IMG border=0 name="toc8" src="bar028.gif" alt="Support page">
</A>
<A HREF = "http://www.websitings.com/guestbook/guestbook.cfm?random=digitale" onMouseover = "img_act('toc9')" onMouseout = "img_inact('toc9')">
<IMG border=0 name="toc9" src="bar029.gif" alt="Sign/View my guestbook">
</A>
<A HREF = "elves.html" onMouseover = "img_act('toc10')" onMouseout = "img_inact('toc10')">
<IMG border=0 name="toc10" src="bar0290.gif" alt="About my site">
</A>
NOTE 1: The SRC code from each IMG tag (=barxxx.gif) gets your own defined file names for each bar button.
NOTE 2: Suppliment or trim the list of the tocx unto your desired size of the menu bar.
NOTE 3: This code is for a horizontal menu. For a vertical menu insert a <BR> tag after each </A> tag.
|
BluePink 
