Tulos

Elementteihin yhdistettyjä vieriviä viestejä?

Esimerkkilinkki Tekstiesimerkki

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
if (document.styleSheets && document.getElementById) {

/* Muunna seuraavia muuttujien arvoja tarvittaessa: */

  var Matka = 100;//vierimispituus kuvapisteinä
  var Nopeus = 10;//vierimisnopeus millisekuntteina
  var Sijainti = 150;//alkusijainti vasemasta marginaalista

/* Muunneltavat osuudet loppuivat. */

  var i,j,Elem = "document.getElementById";
  function Vierita(id) {
    if (i < (Sijainti + Matka)) {
    eval(Elem + '("' + id + '")' +
    '.style.visibility = "visible"');
    eval(Elem + '("'+ id +'")' +
    '.style.left="'+i+'px"');
    i++;
    j++;
      if (i === j) {
      setTimeout("Vierita('" + id + "')", Nopeus);
      }
    }
  }

  function Piilota(id) {
    eval(Elem+'("'+id+'")'+
    '.style.visibility="hidden"');
  }

  function Lopeta(id) {
    i = Sijainti + Matka;
    eval(Elem + '("'+ id +'")' +
    '.style.left="'+i+'px"');
    Piilota(id);
  }

  function Alusta() {
    i = Sijainti;
    j = i;
  }
}
</script>

Tämä tulee BODY-osastoon

<div>

<a href="javascript:alert('Tämä on esimerkkilinkki.')"
 onmouseover="Alusta();Vierita('viesti1');"
 onmouseout="Lopeta('viesti1');">
Esimerkkilinkki</a>

<div id="viesti1"
 style="position:relative;visibility:hidden">
Tämä on <b>A</b>-elementtiin yhdistetty viesti!
</div>

<span
 onmouseover="Alusta();Vierita('viesti2');"
 onmouseout="Lopeta('viesti2');"
 onclick="alert('Tämä on tekstiesimerkki.')">
Tekstiesimerkki</span>

<div id="viesti2"
 style="position:relative;visibility:hidden">
Tämä on <b>SPAN</b>-elementtiin yhdistetty viesti!
</div>

</div>
Weppipakin kotisivulle