|
21.3 autres évènements |
  copyleftSee You Why? |
| Avec un peu de JavaScript, n'oubliez pas de rendre vos pages plus dynamiques et plus interactives. |
|
|
Comme signalé en début de ce chapitre, les événements peuvent être nombreux et JS vous permettra de réagir correctement.
Il n'est pas rare de voir sur des sites des images qui change si l'internaute survole avec sa souris l'une d'elles.
Personne n'ignore plus la manière d'afficher une image :
<img src="../thumbnails/interr7.jpg">,
ce qui affiche : 
Pour l'instant, rien d'exceptionnel. On peut balader sa souris sur cette image, rien ne se produit. Alors que si l'on passe avec sa souris sur la même image ci-dessous, on constate que l'image change...
Essayez, vous verrez... comme elle se décolore subitement... pas de mystère, au début du chapitre, nous avons parlé d'un évènement détectable par 'onMouseOver', qui se déclenche lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément ou objet (ici l'image).
<img onMouseOver="" src="../thumbnails/interr7.jpg">, est la manière d'appeler une action (fonction ou méthode) en JS, qui se notera entre les guilles (voir en rouge ci-dessus). Et, comme la seule action est de faire appel à une nouvelle adresse d'une nouvelle image, on devrait noter src="../thumbnails/interr5.jpg" entre ces guilles. Imaginez la tête de votre navigateur qui doit lire ceci :
<img onMouseOver="src="../thumbnails/interr5.jpg"" src="../thumbnails/interr7.jpg"> ; nous, nous vous avons aidé en utilisant des couleurs, mais vous savez qu'un éditeur de texte ne distingue pas les couleurs, tout au plus les meilleurs mettent-ils eux-mêmes en couleurs selon la syntaxe qu'ils reconnaissent... mais, après avoir ouvert les guilles (notées en rouge chez nous), comment votre éditeur trouvera-t-il les guilles fermantes parmi les 5 qui suivent ?
Vous connaissez la réponse... si vous avez tout lu. Dans notre séquence relative aux 'variables chaine ou string', on s'était interrogé concernant la difficulté d'introduire entre guilles un texte qui comprend lui-même des guillemets. La réponse était : remplacer les guillemets intérieurs par un simple quote ou apostrophe... mais ce caractère a aussi un sens particulier en JS, d'où le danger de générer des erreurs dans certains cas de multiples imbrications de guillemets et quotes (avec un exemple extrait de la programmation du menu apparaissant sur la majorité des pages de ce site CUY) :
zlien[z][i]= '<a href = ' + sitemlinks[z][i] + ' class=ejsmenu title="'+ sitemcomm[z][i] +'">' + sitems[z][i] +'</a>';
Je peux donc utiliser de simples quotes en lieu et place des guillemets (doubles quotes)... mais je dois veiller à ne pas les mélanger...
Nous savons donc qu'il faudra écrire : <img onMouseOver="src='../thumbnails/interr5.jpg'" src="../thumbnails/interr7.jpg">, ainsi plus de confusion... sauf que JS lira une nouvelle image, mais il ne saura pas ce qu'il doit en faire... la solution est d'ajouter le mot clé "this." devant le src='...', sans oublier le point (qui doit séparer l'objet de la méthode qu'on lui applique).
Nous essaierons de limiter notre explication en disant qu'en JavaScript this. se rapporte toujours à l'objet propriétaire de la fonction que nous exécutons, ou plus précisément, à l'objet dont la fonction est une méthode. Ici, l'objet auquel on impose une nouvelle source est l'image interr7.jpg et la méthode à lui appliquer est src. Notre image, accompagnée de son détecteur d'évènement, se notera donc <img onMouseOver="this.src='../thumbnails/interr5.jpg'" src="../thumbnails/interr7.jpg">. Nous reviendrons sur ce mot clé this. lorsque nous traiterons des objets.
Les guillemets ouvrantes de mon instruction ne pourront plus être confondues avec les guillemets fermants de l'instruction onMouseOver... et le this. indique que la nouvelle source de l'image interr7.jpg est interr5.jpg maintenant.
Malheureusement, si vous avez aperçu le changement, vous aurez peut-être regretté qu'elle ne reprenne pas son allure d'origine en la quittant... vos désirs seront des ordres pour moi, il suffisait de me le dire.
En écrivant onMouseOver, on signalait "quand la souris passe sur..." ; pour signaler "quand la souris quitte...", on écrira onMouseOut.
D'où l'instruction finalisée à écrire :
<img onMouseOver="this.src='../thumbnails/interr5.jpg'" onMouseOut="this.src='../thumbnails/interr7.jpg'" src="../thumbnails/interr7.jpg">
Ouf ! Voilà notre image revenue... dès que l'on quitte l'image d'origine, mais le lecteur attentif aura compris qu'il est possible d'y faire réapparaitre une troisième image... à vous d'essayer... et puis non, c'est si vite fait, essayez ici... vous serez surpris du résultat.
Le lecteur aura donc compris que les images doivent être de même dimension pour éviter les désagréments de lecture dus au déplacement de texte.
|
À moins que vous ne placiez vos images dans un tableau (invisible, donc border='0'), de dimensions minimales qui soient les maximums des hauteurs et largeurs de vos images, comme ici. Ici, mon cadre de dimension 98x153 contient facilement mes images qui mesurent respectivement 91x149 et 64x96.
L'évènement onMouseOver est probablement un des plus fréquents lorsqu'il s'agit de détecter un déplacement de la souris sur une zone. Notre propos ici sera de modifier le fond de la cellule si la souris survole cette cellule.
Tout le monde se rappellera des instructions HTML pour construire un tableau :
- les balises qui encadrent le tout : <table>...</table> ;
- autant de paires de balises <tr>...</tr> qu'il n'y aura de lignes dans votre tableau ;
- pour chaque ligne de tableau, autant de paires <td>...</td> qu'il n'y aura de colonnes ;
sans oublier que des paramètres 'colspan' et 'rowspan' peuvent étendre certaines cellules sur plusieurs colonnes ou lignes.
Les détecteurs d'évènements onMouseOver et onMouseOut détecteront si la souris les survole ou non. En cas de survol, ce script changera la teinte de fond en une couleur plus rougeâtre (voir couleurs en HTML, et le F initial dans les chaines RRVVBB "#F0A0A0"). On pourrait donc écrire :
<table width="90%" border="1" align="center" cellpadding="0" cellspacing="0">CCCCCC'">huit</td>
<tr>
<td id="1" bgColor="#EEEEEE" onMouseOver="this.bgColor='#F0C0C0'" onMouseOut="this.bgColor='#EEEEEE'">un</td>
<td id="2" bgColor="#FFFFFF" onMouseOver="this.bgColor='#F0D0D0'" onMouseOut="this.bgColor='#FFFFFF'">deux</td>
<td id="3" bgColor="#EEEEEE" onMouseOver="this.bgColor='#F0C0C0'" onMouseOut="this.bgColor='#EEEEEE'">trois</td>
<td id="4" bgColor="#FFFFFF" onMouseOver="this.bgColor='#F0D0D0'" onMouseOut="this.bgColor='#FFFFFF'">quatre</td>
<td id="5" bgColor="#EEEEEE" onMouseOver="this.bgColor='#F0C0C0'" onMouseOut="this.bgColor='#EEEEEE'">cinq</td>
</tr>
<tr>
<td id="6" bgColor="#CCCCCC" onMouseOver="this.bgColor='#F0A0A0'" onMouseOut="this.bgColor='#CCCCCC'">six</td>
<td id="7" bgColor="#DDDDDD" onMouseOver="this.bgColor='#F0B0B0'" onMouseOut="this.bgColor='#DDDDDD'">sept</td>
<td id="8" bgColor="#CCCCCC" onMouseOver="this.bgColor='#F0A0A0'" onMouseOut="this.bgColor='#
<td id="9" bgColor="#DDDDDD" onMouseOver="this.bgColor='#F0B0B0'" onMouseOut="this.bgColor='#DDDDDD'">neuf</td>
<td id="10" bgColor="#CCCCCC" onMouseOver="this.bgColor='#F0A0A0'" onMouseOut="this.bgColor='#CCCCCC'">dix</td>
</tr>
</table>
Ce qui donnerait :
| un | deux | trois | quatre | cinq |
| six | sept | huit | neuf | dix |
Le lecteur attentif aura observé que les 'id' étaient inutiles ici, mais notés pour pouvoir distinguer chaque cellule du tableau. Par contre, la coloration différente pour les lignes et les colonnes pourrait être très utile pour la lecture de grands tableaux.
Ils se peut que vous ne souhaitiez retenir les noms des visiteurs de vos pages qu'en n'utilisant que des capitales (souvent appelées à tort majuscules [voir ici]). Dans un formulaire que l'on baptisera form_id on emploiera un 'input' de type 'text' que l'on baptisera ch_nom comme les autres champs utiles à l'identification. Dès que l'internaute aura répondu et passera à l'élément suivant, il quittera le champ ch_nom, on dit aussi que le champ perdra le focus, ce qui activera le détecteur d'évènement onBlur. On écrira :
<form name="form_id" method="post" action="...">
<input type="text" name="ch_nom" value="Votre NOM svp" onBlur="change_capitale();">
<input type="text" name="ch_prenom" value="Votre prénom svp">
<input type="submit" value="Soumettre">
</form>
Ce qui signifie bien que dès que l'on quitte le champ ch_nom, onBlur appellera une fonction change_capitale() qu'il nous faudra encore définir. Cette définition devra être faite AVANT la création du formulaire... donc, plus haut dans la source on prévoira la fonction.
<script type="text/javascript">
function change_capitale() {
document.formul_id.ch_nom.value=document.formul_id.ch_nom.value.toLowerCase();
}
</script>
Par précaution, on pourrait même prévoir que dès l'ouverture de la page, le champ ch_nom reçoive le focus, c'est à dire que le curseur soit activé pour répondre immédiatement. On pourrait dans ce cas écrire : <body onLoad="formul_id.ch_nom.focus();">.
voir suite >>>
voir suite >>>
MERCI