Putting it all together...
I was so interested in bugz and owlick's previous posts, that I decided to put it all together into a little script.
First, I'd like to give credit to HTML Goodies and O'Reilly's Dynamic HTML: The Definitive Reference as source material.
Ok, let's start off with a few ground rules. We want to preload our images and use two functions to swap the buttons. Let's call these functions 'mouseOn' and 'mouseOff' (when you write your own script, you can name the functions anything you want to). We're also going to use the same name that bugz created for this rollover: pic1 (again, you can choose any name you want, in fact, to use the script on more than one rollover button, you can use different names).
The entire script goes into the <Head> section of your web page.
<script language="JavaScript">
//Preloading the images and setting the width and height
Image1= new Image(140,130)
Image1.src= "bubble1.gif"
Image2= new Image(140,130)
Image2.src= "bubble2.gif"
//Defining the two functions
function mouseOn()
{
document.pic1.src= Image2.src; (look familiar?)
return true;
}
function mouseOff()
{
document.pic1.src= Image1.src;
return true;
}
</script>
Then, somewhere in your page, use this anchor tag to call the functions:
<a href="yourURL.htm" onMouseOver="mouseOn()" onMouseOut="mouseOff()">
<img name="pic1" src="bubble1.gif" width="140" height="130" border="0"> </a>
Click here to see an example
P.S. bugz, I only had to edit this post 8 times :p
