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:






Shoot Me! | 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 - Shoot Me!</title>
<script language=JavaScript>
<!--
  //global variables
  var layerRef="null", styleSwitch="null", i=0, t=0;
  function init()
  {
    layerRef="document.all";
    styleSwitch=".style";
    start();    
  }
// -->    
</script>
</head>
<body onload=init() bgcolor=White>
<script language="JavaScript">
<!--
//GENERAL FUNCTIONS
    function showLayer(layerName)
    {
      eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
    }
    function hideLayer(layerName)
    {
      eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
    }
    function moveLayerTo(picname,left,top)
    {
      eval(layerRef+'["'+picname+'"]'+styleSwitch+'.top=top');
      eval(layerRef+'["'+picname+'"]'+styleSwitch+'.left=left');
    }
  
    function start()
    {
      if(i==0)
      {
        i=Math.round(Math.random()*4)+1;
      }
      else
      {
        eval('hideLayer("pic'+i+'")');
        t=i;
        while(t==i)
          t=Math.round(Math.random()*4)+1;
        i=t;
        var x=Math.round(Math.random()*300)+30;
        var y=Math.round(Math.random()*200)+20;
        eval('moveLayerTo("pic'+i+'",'+x+','+y+')');
      }
      eval('showLayer("pic'+i+'")');
      setTimeout("start()",eval(500));
    }
// -->
</script>

<style type="text/css">
#pic1 {position: absolute; visibility: hidden; top: 20; left: 50; z-index: 10; width:10}
#pic2 {position: absolute; visibility: hidden; top: 20; left: 100; z-index: 10; width:10}
#pic3 {position: absolute; visibility: hidden; top: 20; left: 150; z-index: 10; width:10}
#pic4 {position: absolute; visibility: hidden; top: 20; left: 200; z-index: 10; width:10}
#pic5 {position: absolute; visibility: hidden; top: 20; left: 250; z-index: 10; width:10}
#text {position: absolute; visibility: visible; top: 310; left: 15; z-index: 4;}

</style>

<div id="pic1">
<a href="#null" onClick="alert('You win a car! Or not...')"><img src="pic1.gif" border=0></a>
</div>
<div id="pic2">
<a href="#null" onClick="alert('Take a cake!')"><img src="pic2.gif" border=0></a>
</div>
<div id="pic3">
<a href="#null" onClick="alert('Greenpeace')"><img src="pic3.gif" border=0></a>
</div>
<div id="pic4">
<a href="#null" onClick="alert('Your button')"><img src="pic4.gif" border=0></a>
</div>
<div id="pic5">
<a href="#null" onClick="alert('Yellow pepper')"><img src="pic5.gif" border=0></a>
</div>

<div id="text">Text</div>

</body>
</html>