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:
No comments:
Post a Comment