description image
This series of instructions shows a small pop up description according to whatever you’re interested in showing. You place the descriptive text within the functions as they’re placed in the document. The functions are triggered with an onMouseOver event handler and reset by calling a reset() method with an onMouseOut event handler.
Assign any CSS rules you like, as long as they’re applicable to a textual link. If you’d like to play around, you can include many different formatting styles and any valid CSS rule that is reflected within the DOM specifications. There are many, some 400 of them.
<html>
<head>
<style>
table {
background:black;
}
a {
text-decoration:none;
color:#000000;
}
td {
font:bold;
background:#ADD8E6;
}
</style>
<script type="text/javascript">
function get(image) {
document.getElementById('tip').innerHTML="<img src='" + image + "' />";
}
function reset() {
document.getElementById('tip').innerHTML=" ";
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td><a href="page.html" onmouseover="get('image.gif')" onmouseout="reset()">Item One</a></td>
</tr><tr>
<td><a href="page.html" onmouseover="get('image.gif')" onmouseout="reset()">Item Two</a></td>
</tr><tr>
<td><a href="page.html" onmouseover="get('image.gif')" onmouseout="reset()">Item Three</a></td>
</tr>
</table>
</body>
</html>
I’ve placed the links inside a table and have provided a reset() method to clear the descriptive text from being displayed. You might not want to do this, though – just leave the descriptions up if you need to, without calling a reset() method.
|
