|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread |
Rating: 
|
Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
February 6th, 2004, 01:37 PM
|
||||
|
||||
|
Elegant Menu Mouseover
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE>Mouseover Demo</TITLE> </HEAD> <BODY BGCOLOR=aqua> <FONT FACE=ARIAL COLOR=navy><CENTER><H1>Mouseover Demo</H1></CENTER> this is a more elegant demonstartion of "On mouseover" to change images.<P></FONT> <HR> <SCRIPT LANGUAGE=JAVASCRIPT> <!-- var darkened_pics = new Array(); var lighted_pics = new Array(); var clicked_pics = new Array(); function preloadButtonSet(num,dark,light,clicked) { darkened_pics[num] = new Image(); darkened_pics[num].src = dark; lighted_pics[num] = new Image(); lighted_pics[num].src = light; clicked_pics[num] = new Image(); clicked_pics[num].src = clicked; } // ***** MODIFY THE VARIABLES BETWEEN TH // ESE COMMENTS ***** // define the image swapping in the foll // owing format: // preloadButtonSet(button_num,dark_butt // on_src,light_button_src,clicked_button_s // rc) preloadButtonSet(0,"ann1.jpg","ann2.jpg","goforit.jpg"); preloadButtonSet(1,"betty1.jpg","betty2.jpg","goforit.jpg"); preloadButtonSet(2,"candy1.jpg","candy2.jpg","goforit.jpg"); preloadButtonSet(3,"diane1.jpg","diane2.jpg","goforit.jpg"); preloadButtonSet(4,"elsie1.jpg","elsie2.jpg","goforit.jpg"); preloadButtonSet(5,"fiona1.jpg","fiona2.jpg","goforit.jpg"); // ***** MODIFY THE VARIABLES BETWEEN TH // ESE COMMENTS ***** // --> </SCRIPT> <SCRIPT LANGUAGE=JAVASCRIPT> <!-- function lighten(num) { if (document.images) eval("document.button"+num+".src = lighted_pics["+num+"].src;"); return false; } function darken(num) { if (document.images) eval("document.button"+num+".src = darkened_pics["+num+"].src;"); return false; } function clicked(num) { if (document.images) { eval("document.button"+num+".src = clicked_pics["+num+"].src;"); setTimeout("document.button"+num+".src = darkened_pics["+num+"].src;",350); } return true; } // --> </SCRIPT> <CENTER> <TABLE COLS=3 border=0 WIDTH="378"> <TR><TD align=left><A href="test.htm#ann" onMouseOver="return lighten(0)" onMouseOut="return darken(0)" onClick="return clicked(0)" target="_top"><Img src="ann1.jpg" name="button0" width=111 height=101 border=0 ALT="Ann"></A> </TD> <TD align=center> <A href="test.htm#betty" onMouseOver="return lighten(1)" onMouseOut="return darken(1)" onClick="return clicked(1)" target="_top"><Img src="betty1.jpg" name="button1" width=111 height=101 border=0 ALT="Betty"></A> </TD> <TD align=right> <A href="test.htm#candy" onMouseOver="return lighten(2)" onMouseOut="return darken(2)" onClick="return clicked(2)" target="_top"><Img src="candy1.jpg" name="button2" width=111 height=101 border=0 ALT="Candy"></A> </TD> </TR> <TR><TD align=left> <A href="test.htm#diane" onMouseOver="return lighten(3)" onMouseOut="return darken(3)" onClick="return clicked(3)" target="_top"><Img src="diane1.jpg" name="button3" width=111 height=101 border=0 ALT="Diane"></A> </TD> <TD align=center> <A href="test.htm#elsie" onMouseOver="return lighten(4)" onMouseOut="return darken(4)" onClick="return clicked(4)" target="_top"><Img src="elsie1.jpg" name="button4" width=111 height=101 border=0 ALT="Elsie"></A> </TD> <TD align=right> <A href="test.htm#fiona" onMouseOver="return lighten(5)" onMouseOut="return darken(5)" onClick="return clicked(5)" target="_top"><Img src="fiona1.jpg" name="button5" width=111 height=101 border=0ALT="Fiona"></A> </TD> </TR> </TABLE> </CENTER> <HR> <CENTER> <FONT FACE=ARIAL COLOR=navy SIZE=4> <A HREF="../home.htm">return to JavaScript Page</A> <H5>John Oyston, (oyston@oyston.com), Dec 1998</H5></FONT></CENTER> </BODY></HTML>
|
|
| Viewing: ASP Free Forums > Programming > Code Bank > Elegant Menu Mouseover |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
