Esimerkkejä interaktiivisista toiminnoista

  • Ruutu tervehtii tekstillä "Hyvää päivää!", kun kursori tulee ruutuun, ja hyvästelee tekstillä "Näkemiin!", kun tämä poistuu.
    • <td onmouseover="tervehdi(this)" onmouseout="hyvästele(this)"></td>
      • ​function tervehdi(painike) { painike.innerHTML = "Hyvää päivää!"; }​
      • function hyvästele(painike) { painike.innerHTML = "Näkemiin!"; }​
  •  Ikkuna tervehtii tekstillä "Hyvää päivää!", kun kursori tulee ruutuun, ja hyvästelee tekstillä "Näkemiin!", kun tämä poistuu.
      • <td onmouseover="moikkaa()" onmouseout="heiluta()"></td>
        • ​function moikkaa() { alert( "Hyvää päivää!"); }​
        • function heiluta() { alert("Näkemiin!"); }​
  • Ruudun lukuarvo kasvaa yhdellä, kun sitä klikkaa. Poistumalla ruudusta lukuarvo nollautuu.
    • <td onclick="lisää(this)" onmouseout="nollaa(this)"></td>
      • ​function lisää(painike) { painike.innerHTML += 1; }​
      • function nollaa(painike) { painike.innerHTML = 0; }​
  • Ruudun taustaväri muuttuu, kun kursori liikkuu ruudun päälle tai pois.
    • <td onmouseover="enterväri(this)" onmouseout="exitväri(this)"></td>
      • function enterväri(painike) { painike.style.backgroundColor = "red";}
      • function exitväri(painike) { painike.style.backgroundColor = "blue"; }
  • Ruudun taustakuva muuttuu, kun kursori tuplaklikkaa ruutua.