Exerice 9 : Evénénments Javascript

Rappels

Pour lancer une fonction au chargement d’une page :
<body onLoad="mafonction()" id"Evenement1">


Pour lancer une fonction lors d’un clic :
<p onClick="mafonction()" id"Evenement2">

Pour lancer une fonction au passage de la souris :
<img src="..." onMouseOver="mafonction()" id"Evenement3">


Pour déclencher un événement à retardement
<img src="..." onMouseOver='setTimeout('mafonction()', 3000)' id"truc">

Exercices

  1. Le contenu du titre soit changé au chargement de la page
  2. La couleur du paragraphe soit changée lorsqu’on clique dessus
  3. La source de l’image soit modifiée lorsqu’on passe sa souris dessus au bout de 5 secondes.

Titre qui change au chargement

Paragraphe qui change de couleur

Javascript et Jquery

HTML

<h3 id="idTitre">Titre qui change au chargement</h3>

<p id="idParagraphe" onClick="ChangerCouleurParagraphe()">Paragraphe qui change de couleur</p><

<img src="images/javascript.png" alt="Javascript et Jquery" class="img-thumbnail" id="idImage" onMouseOver="setTimeout('ModifierImage()', 5000)">

Javascript

<script>
// Fonction pour changer le titre au chargement de la page
function ChangerTitre() {
document.getElementById('idTitre').innerHTML="Nouveau Titre";
}
// Fonction pour changer la couleur du paragraphe
function ChangerCouleurParagraphe() {
document.getElementById('idParagraphe').style.color="red";
}
// Fonction pour changer l'image
function ModifierImage() {
document.getElementById('idImage').src="images/jquery.jpg";
}
</script>