Tricks: How to...
Image effects:
› Preload images
› Preload images 2
› Swap images
› Swap images 2
› View larger image
› Image transparency
› Image slideshow
Special effects:
› Border
› Border 2
› Watermark
› Scroller
› Scroller 2
› Link hover color
› Custom cursor
› Snowing
› Auto window resizer
› Link tips
› Popup
Buttons & menus:
› Back button
› Java buttons
› Flat buttons
› Slide menu
› Drop down menu
› Alphabet menu
Mouse effects:
› Elastic mouse
› Mouse snake
› Mouse stars
› Mouse orbit
› Mouse eyes
Text generators:
› Infobox
› Quote generator
› Fading messages
› Text fader
› Text glow
› Credits

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.