Mouseover images
This example shows how to create your own mouseover function. It works with a fixed webdirectory and dynamic image names, so the same function can be used for multiple mouseover enabled images.
<html>
<head>
<script type="text/javascript">
// Set the webdirectory in which your images are accessible
var url_dir = 'http://www.mijnwinkel.nl/images/';
// Set the extension of your images
var ext = '.jpg';
function switch_img(obj){
if(!obj.mouseState)
obj.mouseState = 'normal';
if(obj.mouseState == 'normal')
obj.mouseState = 'mouseover';
else
obj.mouseState = 'normal';
obj.src = url_dir + obj.id + '_' + obj.mouseState + ext;
// This next line only serves as feedback for you to see what the src of the image is changed into
document.getElementById('url').innerHTML = obj.src;
}
</script>
</head>
<body>
<!-- Set the initial (normal) image in the src of the img tag -->
<!-- The id is the 'name' of the image, the part before the underscore ( _ ) the Mouse events can be left unaltered -->
<img id="image" src="http://www.mijnwinkel.nl/images/image_normal.jpg" onMouseOver="switch_img(this);" onMouseOut="switch_img(this);"/>
<!-- This span is only used for feedback -->
<br/><br/><span id="url"/>
<!-- end -->
</body>
</html>
Post your comment on this topic.