Ces fonctions sont particulièment utilisées pour rendre les informations d'une page plus dynamiques. Lorsque le curseur de la souris survole par exemple un lien hypertexte, une action peut être déclenché avec la fonction onMouseOver. Par contre, une autre action sera lancée avec la fonction onMouseOut lorsque l'on survole plus le lien.
Au lancement de la page, la PhotoInitiale sera chargée puis lors du survol, le texte "Voici le texte explicatif de la photo" apparaîtra dans la barre d'état du navigateur. Lorsque l'on quitte la PhotoInitiale, la zone de la barre d'état redevient vide.
<html>
<head>
...
<script>
function ecrit(texte) {
window.status=texte;
}
</script>
</head>
<body>
<a href="Fichier_a_charger_lors_du_clic.htm"
onMouseOver="ecrit('Voici le texte explicatif')"
onMouseOut="ecrit('')">
<img src="PhotoInitiale.jpg"></a>
</body>
</html>
Dans ce cas, la "PhotoInitiale" sera remplacée par "PhotoChangee" lors du survol et la "PhotoInitiale reviendra lorsque l'on quitte l'image définie comme lien hypertexte. Pour cela, la déclaration d'une fonction personnalisée swap(NouvelleImage) sera nécessaire. La fonction javascript document.images[n].src permet de modifier la source de la enième image chargée dans la page (document).
<html>
<head>
...
<script>
function swap(NouvelleImage) {
fichier=NouvelleImage+".jpg";
document.images[0].src=fichier;
}
</script>
</head>
<body>
<a href="Fichier_a_charger_lors_du_clic.htm"
onMouseOver="swap('PhotoChangee')"
onMouseOut="swap('PhotoInitiale')">
<img src="PhotoInitiale.jpg"></a>
</body>
</html>