|
|
change the source of an image
You might have to alter the location of the image being displayed in that space on the page you’re working with. You would do this with an src attribute declaration. The page element is accessed with the getElementById() method and the image is changed. The image may be a different image or a duplicate image that is simply located elsewhere.
<html>
<head>
<script type="text/javascript">
function moveover() {
document.getElementById('image').src="bulbon.gif";
}
function moveback() {
document.getElementById('image').src="bulboff.gif";
}
</script>
</head>
<body>
<b>Mouse over the image</b><br />
<img id="image" src="bulboff.gif" onmouseover="moveover()" onmouseout="moveback>
</body>
</html>
We used an onMouseOver event to trigger the first change and an onMouseOut event to change back to the original image. This is advantageous when you’re working with images that must necessarily be located in different directories on even different servers. The URL may be stated as absolute or relative, according to needs. If you’re changing servers, be sure to use the absolute https://www.domain.com/ method to avoid confusion.
|
|
