DHTML
Moving Objects Rollover Pulldown Menu Preloading Drag'n'Drop Scrolling Text Teletype Shoot Me! Animation ActiveX Opacity Transition Mad Bubbles Gates JavaScript
Russian | Main Page
Useful links:
Stream your favorite movies and TV shows seamlessly with 123movies.
|
<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>