Hey hype,
I made a demo page for you. I'm not great at html and javascript, but I looked at this page (
http://www.boutell.com/newfaq/creating/rollovers.html) and made a page using your images.
I figured out how to do multiple images and how to preload the rollover image, so that there is no delay when you rollover the image for the first time. If anyone sees errors in this, please share your thoughts!
Here's some explanation of the code... and how you can modify it to your own page. (I also attached a .zip with the code and sample images)
----------------------------------------------------
<script>
new Image().src="example1b.jpg"
new Image().src="example2b.jpg"
new Image().src="example3b.jpg"
</script>
<html>
<img
id="mybutton1"
src="example1a.jpg"
onMouseOver="document.images['mybutton1'].src='example1b.jpg'"
onMouseOut="document.images['mybutton1'].src='example1a.jpg'"
>
<br>
<img
id="mybutton2"
src="example2a.jpg"
onMouseOver="document.images['mybutton2'].src='example2b.jpg'"
onMouseOut="document.images['mybutton2'].src='example2a.jpg'"
>
<br>
<img
id="mybutton3"
src="example3a.jpg"
onMouseOver="document.images['mybutton3'].src='example3b.jpg'"
onMouseOut="document.images['mybutton3'].src='example3a.jpg'"
>
</html>
------------------------
Let's say that in the rollover you want to make, example1a is the initial image you see, example1b is the image you see when you roll over. At the top of your page, you put the "new Image" code and the location of example1b. That pre-loads example1b. You need to do that for each rollover image you make.
Then you have an img tag for each rollover button. Each image needs its own unique id... mybutton1, mybutton2, etc. The src=" should be followed by the location of the initial image you see... example1a.
The command "onMouseOver" means that when the user puts the cursor over the image, show the rollover... example1b.
The command "onMouseOut" means that when the user moves the cursor off the image, the rollover disappears and the original image is shown... example1a.
Also, for each onMouseOver or onMouseOut, be sure to put the unique id for that rollover in between the [].
And that's all there is to it. Just keep repeating those steps
Finally! I got to help you do something in return for all your compositing tutes! hahaha... hooray!
~Mechis