Custom Search

Making a 'mouseover' exchange of graphics

 

Sometimes you want to acknowledge the user having 'moused over' a graphic in your page. This is best done by includeing a 'brightened up version of that graphic.... the graphic then seem to 'light up' when selected. The on 'right clicking' the user can follow through to a page.

I will use an example that takes you to the Facebook page for Cyberphysics - my other site.

If you 'mouseover' the image below you will see it 'light up'. Clicking on it will take you to facebook!

Follow on Facebook

The Code

<a href="https://www.facebook.com/Cyberphysics" target="_blank"> Here, you set the link you wish the user to go to after right clicking on the graphic.
<img src="http://www.cyberphysics.co.uk/graphics/buttons/facebook.png" This is the image that appears on your page before the 'mouseover'

alt="Follow on Facebook" width="45" height="45" hspace="5" border="0" align="absmiddle"

This sets the size of the graphic and what should appear if the graphic does not upload for some reason...
onmouseover="this.src='http://www.cyberphysics.co.uk/graphics/buttons/facebookMO.png'" Here you are setting the graphic that is visible when the mouse pointer hovers over your image.
onmouseout="this.src='http://www.cyberphysics.co.uk/graphics/buttons/facebook.png'"/> And now we have the image that you want visible when your mouseover experience is finished. You could have a different image to show the user had already looked at this.... or just go back to the original one.
</a> Now we close off the hyperlink jump instruction