Image change on hover

If you are not familiar with web studio refer to the instruction page

How to change an image when you hover over it

This uses 2 protected graphics you name and takes 3 steps

<script type="text/javascript" src=""> </script>

Go to the HTML tab in Insert Page HTML select Inside Head
copy/paste this

Go to the HTML tab in Add HTML select HTML object
double click on it and copy/paste this into it

double click and paste
you only need to do this once per page

You use protected graphics for these so that we can name them
You use two images the same size, and one goes on top of the other
Each pair needs to be the same type, .gif .jpg or .png
So they will change we need to name them a special way
The two pictures first part of the name is the same so we know
they go together, the second part tells us which is _on or _off



The picture's name for when the mouse is off of it, this picture goes on the top
and you see it all of the time

The picture's name for when the mouse is on it, this picture goes on the bottom
and you see it when hovers over it

You can rename pictures on your computer by right clicking on them

Now we need to tell the pictures we want them to use the hover code
Select your image
Go to the HTML tab in Insert Object HTML select Inside Object
paste this class in each of the pictures


Preview the page to see it work

If you are already using an ADD ON you only use this link once - see the instuction page for more

Every little bit helps to keep this site up and running, thank-you.

Web Studio Next


These effects are not officially part of Web Studio
If you have questions see the custom coding page