Rollover | Description
If you want to use any of this examples, please put a link to our site.Here you can find HTML-code for such link.
<html><head>
<title>www.redmount.com - DHTML - Rollover</title>
</head>
<body bgcolor=white leftmargin=30 marginwidth=30>
<script language=javascript>
<!--
//global variables
var layerRef="null",styleSwitch="null";
layerRef="document.all";
styleSwitch=".style";
function showLayer(layerName)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
function hideLayer(layerName)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
pic = new Image();
pic.src = "painting.gif";
//-->
</script>
<style type=text/css>
#home {position: absolute; z-index: 15; visibility: visible; left: 50; top: 100;}
#hard {position: absolute; z-index: 15; visibility: visible; left: 120; top: 100;}
#soft {position: absolute; z-index: 15; visibility: visible; left: 190; top: 100;}
#help {position: absolute; z-index: 15; visibility: visible; left: 260; top: 100;}
#info {position: absolute; z-index: 15; visibility: visible; left: 330; top: 100;}
#painthome {position: absolute; z-index: 10; visibility: hidden; left: 30; top: 94;}
#painthard {position: absolute; z-index: 10; visibility: hidden; left: 100; top: 94;}
#paintsoft {position: absolute; z-index: 10; visibility: hidden; left: 170; top: 94;}
#painthelp {position: absolute; z-index: 10; visibility: hidden; left: 240; top: 94;}
#paintinfo {position: absolute; z-index: 10; visibility: hidden; left: 310; top: 94;}
#text {position: absolute; z-index: 5; visibility: visible; left: 15px; top: 15px;}
</style>
<div id="text">Text</div>
<!-- Home -->
<div id="home">
<a href="javascript:alert('Home button clicked');"
onMouseOver="showLayer('painthome');"
onMouseOut="hideLayer('painthome');">
<img src="home.gif" width=30 height=8 border=0></a>
</div>
<div id="painthome"><img src="painting.gif" width=70 height=32 border=0></div>
<!-- Hard -->
<div id="hard">
<a href="javascript:alert('Hard button clicked');"
onMouseOver="showLayer('painthard');"
onMouseOut="hideLayer('painthard');">
<img src="hard.gif" width=29 height=7 border=0></a>
</div>
<div id="painthard"><img src="painting.gif" width=70 height=32 border=0></div>
<!-- Soft -->
<div id="soft">
<a href="javascript:alert('Soft button clicked');"
onMouseOver="showLayer('paintsoft');"
onMouseOut="hideLayer('paintsoft');">
<img src="soft.gif" width=25 height=8 border=0></a>
</div>
<div id="paintsoft"><img src="painting.gif" width=70 height=32 border=0></div>
<!-- Help -->
<div id="help">
<a href="javascript:alert('Help button clicked');"
onMouseOver="showLayer('painthelp');"
onMouseOut="hideLayer('painthelp');">
<img src="help.gif" width=26 height=7 border=0></a>
</div>
<div id="painthelp"><img src="painting.gif" width=70 height=32 border=0></div>
<!-- Info -->
<div id="info">
<a href="javascript:alert('Info button clicked');"
onMouseOver="showLayer('paintinfo');"
onMouseOut="hideLayer('paintinfo');">
<img src="info.gif" width=24 height=8 border=0></a>
</div>
<div id="paintinfo"><img src="painting.gif" width=70 height=32 border=0></div>
</body>
</html>
