DHTML

Движущийся фон
Движущиеся объекты
Подсветка кнопок
Выпадающие меню
Ожидание загрузки
Drag'n'Drop
Титры
Телетайп
Попади в меня!
Анимация
ActiveX
Прозрачность
Эффекты загрузки
Шлейф
Шторы

JavaScript


Книги

English | Главная


Полезные ссылки:
portable rufus





Попади в меня! | Описание

Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки.
<html>
<head>
<title>www.redmount.com - DHTML - Попади в меня</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('Вы выиграли машину! Или проиграли...')"><img src="pic1.gif" border=0></a>
</div>
<div id="pic2">
<a href="#null" onClick="alert('Дружок, возьми пирожок!')"><img src="pic2.gif" border=0></a>
</div>
<div id="pic3">
<a href="#null" onClick="alert('Земля - наш дом. Не надо мусорить.')"><img src="pic3.gif" border=0></a>
</div>
<div id="pic4">
<a href="#null" onClick="alert('Пуговка от штанов')"><img src="pic4.gif" border=0></a>
</div>
<div id="pic5">
<a href="#null" onClick="alert('Перчик желтый')"><img src="pic5.gif" border=0></a>
</div>

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

</body>
</html>