|
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 à chacun d'eux. Avant de multiplier les exemples dans le chapitre suivant, nous voulons montrer ici une simple interactivité lorsque l'internaute visiteur de vos pages déplace sa souris et survole une image, puis lorsqu'il déplace sa souris dans un tableau.
Il n'est pas rare de voir sur des sites des images qui changent 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 (sans reprendre ses couleurs, sniff...)... 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 ?
Par défaut, JS décidera que ce seront les premières rencontrées, même si cela n'est pas notre volonté.
Vous connaissez la réponse... si vous avez tout lu jusqu'ici... Dans une séquence précédente, 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>';
Comme dans le chapitre précédent, 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 ici 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 l'emploi de ce mot clé this. lorsque nous traiterons de la création d'objets, au chapitre 24.
Les guillemets ouvrants de mon instruction ne pourront plus être confondus 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 demander.
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... mais le lecteur attentif aura compris qu'il est possible d'y faire apparaitre une troisième au lieu de faire réapparaitre l'ancienne image... à vous d'essayer... et puis non, c'est si vite fait, essayez ici... vous serez surpris du résultat.
Le lecteur aura donc vite 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, la cellule de mon tableau mesure 98 pixels de large sur 158 de haut et 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 et/ou plusieurs lignes.
Les détecteurs d'évènements onMouseOver et onMouseOut détecteront si la souris les survole ou non. 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.
voir suite >>>
voir suite >>>
MERCI