Hover effect for images
| Version | : | 2.1 |
| License | : | GPL |
| Status | : | stable |
Documentation
Features:
This script makes buttons with hover effect possible and displays at comment in the statusbar of the webbrowser. (depends on browser)
Usage:
Read first "Free PHP- & Javascripts -> Using the scripts". Now an example:
<a href="./classix/index.htm"
onMouseOver="hoover('pics/button_classix_highlighted.gif',
'bild11','Die ersten STO-Versionen.')"
onMouseOut="hoover('pics/button_classix.gif','bild11','')">
<img src="pics/button_classix.gif" name="bild11"
alt="Classix" border="0" align="center"></a>
In the example above a image (button_classix.gif; HTML name: bild11) will definied as link. Please lay your attention on the two eventhandler onMouseOver and onMouseOut. They call the function hoover(), if the mouse will moved over the image or if it leave the image, with different parameters. It exist a second image button_classix_highlighted.gif. This shall displayed, if you move the mouse over the first image. You can name the images as you want, naturally. The function has the following parameters:
hoover('imageURL','HTML name of the 1st image','comment')
At first you have to define a link with the a tag. With the onMouseOver eventhandler the function will called, the second image, the HTML name of the 1st image and the comment for the status bar will given. At onMouseOut will given the URL of the first image and it's HTML Name. Leave blank the comment parameter.
So will definied every graphical link. Every image must have another HTML name. Thereby the hover effect works very well, I recommend the usage of preload.js, which loads the image into the memory of the browser, before it's needed.
To don't let be the loading time too long, I recommend to use images with max. 256 colors (8 bit colordepth). Lesser is more :-)