EIW Fall 2003 JavaScript Example: dom4

<!-- Javascript: uses CSS positioning attributes from DOM 
to move some text around 
 -->

<HTML>
<HEAD>
<TITLE>Moving Text Example</TITLE>
</HEAD>

<BODY>

<H3 ID=joe style="position:absolute; left:0">
Moving Text Moving Text Moving Text Moving Text Moving Text Moving Text
Moving Text Moving Text Moving Text Moving Text Moving Text Moving Text
Moving Text Moving Text Moving Text Moving Text Moving Text Moving Text
Moving Text Moving Text Moving Text Moving Text Moving Text Moving Text
Moving Text Moving Text Moving Text Moving Text Moving Text Moving Text
</H3>


<SCRIPT>

// pos keeps track of the current position
var pos=0;

// inc is how much we change the position by.
var inc=20;


function jumptext() {
  j = document.getElementById("joe");
  pos=pos+inc; 
  if (pos<0 || pos>300) {
    // reverse direction
    inc=-inc;
    pos=pos+2*inc;
  }
  j.style.left=pos;
}

</script>
<!-- these BRs make sure our launch text is well below the paragraph -->

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<!-- uses mouseover to move the paragraph (by calling jumptext()). -->

<P onMouseOver="jumptext();" 
   STYLE="text-align:center; font-size:14pt; color:blue;">Point here</P>