|
|
|
|
Lots of sites on the Internet change a picture when you move the mouse over it. To do this you need to create two pictures: an inactive picture and an active picture. The inactive picture is the normal picture in the document (in my example a Stop sign and a thumbs-down sign) and the active picture is what the browser displays when the mouse moves over the picture (a Go sign and a thumbs-up sign). You then have to put a bit of javascript into the <head> of your document that defines the pictures and what to do with them. Finally, you include the pictures on the page and tell the script when the cursor is on top of them using the onmouseover and onmouseout script events. This code does the trick: <html>
<head><title>Changing pictures with the mouse</title></head>
<script language="JavaScript">
<!--//
if (document.images) {
img1on = new Image(); // Active images
img1on.src = "go.gif";
img2on = new Image();
img2on.src = "yes.gif";
img1off = new Image(); // Inactive images
img1off.src = "stop.gif";
img2off = new Image();
img2off.src = "no.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
//-->
</script>
<body>
<p>This code shows a thumbs-down sign which become a
thumbs-up sign and a Stop sign that becomes a Go sign
when you move the mouse over it.</p>
<a href="#images" onMouseOver="imgOn('img2')"
onMouseOut="imgOff('img2')">
<p><img name="img2" border="0" height="34" width="50"
src="no.gif" alt="Thumbs Up"></a></p>
<p> </p>
<p><a href="#images" onMouseOver="imgOn('img1')"
onMouseOut="imgOff('img1')"><img
name="img1" border="0" height="50" width="34" src="stop.gif"
alt="Go sign"></a> </p>
</body>
</html>
You can use this code as a basis and simply change the picture names as appropriate. |
More information Changing the appearance of links Changing pictures with the mouse Expanding and contracting outlines Displaying a message in the status bar |
