Hmm i think you are looking for something that performs a image rollover which is based on the mouseover/moustout event of some hyperlinks.
I haven't modified the script you mentioned but i think you can use the following idea to do it for you.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="760">
<tr><td width="300" valign="top">
<a href="http://www.dynamicdrive.com/" onMouseOver="document.getElementById('first').style.visibility = 'visible';" onMouseOut="document.getElementById('first').style.visibility = 'hidden';">Dynamic Drive</a>
<br>
<a href="http://www.javascriptkit.com/" onMouseOver="document.getElementById('second').style.visibility = 'visible';" onMouseOut="document.getElementById('second').style.visibility = 'hidden';">Javascript Kit</a>
<br>
<a href="http://www.php.net/" onMouseOver="document.getElementById('third').style.visibility = 'visible';" onMouseOut="document.getElementById('third').style.visibility = 'hidden';">PHP Information</a>
</td>
<td width="460" valign="top">
<img id="first" src="1.png" style="visibility:hidden; position:absolute; padding-top:0px;" >
<img id="second" src="2.png" style="visibility:hidden; position:absolute;padding-top:0px;">
<img id="third" src="3.png" style="visibility:hidden; position:absolute;padding-top:0px;">
</td></tr>
</table>
</body>
</html>
Junior Coders
Textual tooltip II (fade into view) with images?
Posting Permissions
Reply With Quote
Bookmarks