Html Tips and Tricks

Friday, May 13, 2005

Javascript: Rollover Buttons

These javascript tips and tricks will teach you how to make image links that change as you put your mouse over them. It is simple.

First, you need two images. One will be the image when the link is not being touched, the other image is when the link has been activitated.
In this case, I am using these two images:



Second, you need to put this code in between the <head> and the </head> on the page that the rollover link is going to be on:
<SCRIPT LANGUAGE="Javascript">
<!--image1= new Image( );image1.src=
"http://www.blogblog.com/tictac/tictac_orange.gif
";image2= new Image ();image2.src=
"http://www.blogblog.com/tictac/tictac_green.gif";
//--></SCRIPT>

Make sure that you change the two URLs (in italics). The first one is to the image of when the link is not activitated, and the second is to the image when the link is touched.

Finally, you insert this HTML code in the main part of your web page, and you you will get a rollover button that links to another site.
<A HREF="http://htmltips.blogspot.com.html" onmouseover="mybutton.src='
http://www.blogblog.com/tictac/tictac_orange.gif';"
onmouseout="mybutton.src=
'http://www.blogblog.com/tictac/tictac_green.gif
;"> <IMG SRC="http://www.blogblog.com/tictac/tictac_green.gif" name="mybutton"></A>

As usual, make sure that you change the code in italics to match your needs.

The result of these three steps is as follows:


NEED EXTRA HELP? HAVE A SUGGESTION? HAVE SOMETHING TO ADD? PLEASE POST COMMENTS WHILE LOOKING AT ALL THESE USEFUL HTML TIPS AND TRICKS. THANK YOU!

8 Comments:

Post a Comment

<< Home


Hit Counter