DHTML

Moving Background
Moving Objects
Rollover
Pulldown Menu
Preloading
Drag'n'Drop
Scrolling Text
Teletype
Shoot Me!
Animation
ActiveX
Opacity
Transition
Mad Bubbles
Gates

JavaScript


Books

Russian | Main Page


Useful links: Stream your favorite movies and TV shows seamlessly with 123movies.







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>