HTML JavaScript Codes
<a href="http://www.michaelbach.de/ot/index.html" onmouseout="document.MyImage.src='http://www.michaelbach.de/ot/lum_scGrid/scgrid-redstreets.gif';" onmouseover="document.MyImage.src='http://www.michaelbach.de/ot/lum_scGrid/scgrid-redsquares.gif';" target="_blank"><img alt="Scintillating Grid" border="0" height="480" name="MyImage" src="http://www.michaelbach.de/ot/lum_scGrid/scgrid-redstreets.gif" style="background: transparent;" width="480" /></a>
Configuration
The first thing you will need are 2 images. One for normal view, a second for the change.
image1.png image2.png
The first image will be placed on the page as it normally would. The one main difference is you have to specify a name in the img tag like so...
<img src="image1.gif" name="MyImage">
This image can now be accessed by javascript as document.MyImage. Of course add in the width, height, alt, and border properties as desired too.
The next part is to create a link around that image. This will allow javascript to affect the image properties.
<a href="" onMouseOver="document.MyImage.src='image2.png';" onMouseOut="document.MyImage.src='image1.png';">
<img src="image1.png" name="MyImage"></a>
SRC is the SouRCe of the image file.
document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.
OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.
This type of rollover effect is very common for navigation uses. You can create two images being close to the same. One image may have regular text on it, the other having highlighted text. Put them together in a rollover effect and you have a neat navigation happening. Placing a value in the href will complete the navigation effect.
TROUBLE SHOOTING :
If you have more than one rollover on the same web page, you MUST use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.
TIPS :
Try to use two images of the same dimensions for best results.
document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.
OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.
This type of rollover effect is very common for navigation uses. You can create two images being close to the same. One image may have regular text on it, the other having highlighted text. Put them together in a rollover effect and you have a neat navigation happening. Placing a value in the href will complete the navigation effect.
TROUBLE SHOOTING :
If you have more than one rollover on the same web page, you MUST use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.
TIPS :
Try to use two images of the same dimensions for best results.
No hay comentarios.:
Publicar un comentario
BiENVENiDO, estás en tu casa.