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:






Moving Objects | 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 - Moving Objects</title>
<script language=javascript>
<!--
  //global variables
  var layerRef="null",styleSwitch="null";
  function init()
  {
    layerRef="document.all";
    styleSwitch=".style";
    go();    
  }
// -->    
</script>
</head>

<body onload=init() bgcolor="White">
<script language=javascript>

<!--
  function moveLayerTo(coinname,left,top)
  {
    eval(layerRef+'["'+coinname+'"]'+styleSwitch+'.top=top');
    eval(layerRef+'["'+coinname+'"]'+styleSwitch+'.left=left');
  }
  var i1=285,i2=285,i3=285,i4=285,i5=285,j1=100,j2=370,j3=370,j4=370,j5=370,smj=25;

  function go()
  {
    i1=i1;j1=j1;
    j1=j1+smj;
    if(j1>380)
      j1=-380;
    j2=j2+smj;
    if(j2>380)
      j2=-360;
    j3=j3+smj;
    if(j3>380)
      j3=-250;
    j4=j4+smj;
    if(j4>380)
      j4=-150;
    j5=j5+smj;
    if(j5>380)
      j5=-50;
    moveLayerTo("coin1",i1,j1);
    moveLayerTo("coin2",i2,j2);
    moveLayerTo("coin3",i3,j3);
    moveLayerTo("coin4",i4,j4);
    moveLayerTo("coin5",i5,j5);
    setTimeout("go()",eval(50));
  }
// -->
</script>

<style type="text/css">
#coin1 {position: absolute; visibility: visible;  top: 600; left: 50; z-index:   10; width:10}
#coin2 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin3 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin4 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#coin5 {position: absolute; visibility: visible;  top: 600; left: 100; z-index:  10; width:10}
#pig   {position: absolute; visibility: visible;  top: 280; left: 150; z-index: 100; width:10}
#line  {position: absolute; visibility: visible;  top: 265; left: 280; z-index:   5; width:10}
#text{position: absolute; z-index: 2; visibility: visible; left: 15px; top: 15px;}
</style>

<div id="coin1">
<img src="coin01.gif" border=0>
</div>
<div id="coin2">
<img src="coin02.gif" border=0>
</div>
<div id="coin3">
<img src="coin03.gif" border=0>
</div>
<div id="coin4">
<img src="coin04.gif" border=0>
</div>
<div id="coin5">
<img src="coin05.gif" border=0>
</div>
<div id="pig">
<img src="pig.jpg" border=0>
</div>
<div id="line">
<img src="line.gif" border=0>
</div>

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

</body>
</html>