Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
23 novembre 2008 7 23 /11 /novembre /2008 00:26

Un article cousin de celui-ci pour un besoin analogue : qu'un module change de tête lorsque la souris le survole. L'idée la plus évidente est de le réduire à son titre au repos et de le développer quand on le survole. Mais on peut aussi bien vouloir changer l'image de fond et/ou la couleur du texte et/ou sa taille, ou changer l'allure de la barre de titre, ou… libre à vous.

Chose intéressante, le programme que je vous propose (inutilisable au niveau Confiance) n'est pas réservé aux modules mais s'applique aussi bien à tout ce qui porte un identifiant – ce qui ouvre des perspectives. En fait, c'est une réalisation en JavaScript de ce que permet la pseudo-classe :hover en CSS dans les navigateurs convenables. Un jour, Internet Explorer sera un navigateur convenable et supportera cette classe sur autre chose que des liens. Ce jour-là, mon programme sera inutile. Pour ce que je sais, il a donc encore une bonne espérance de vie.

Il ne change aucunement l'aspect du blog. Il donne aux éléments désignés une certaine classe supplémentaire, et cette classe dépend de la présence de la souris dans ou hors de ces éléments – le reste est pure affaire de CSS.


Comme d'habitude, deux parties : un mode d'emploi (indispensable) court et simple (j'espère) accompagné de quelques exemples, puis le démontage (lecture facultative) du programme si ça vous dit.


Installation

Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.

Recopiez le programme suivant sur votre ordinateur :

 /* éléments "à survol" */ /* Jus de méninges - http://brendufat.over-blog.com/article-25046302.html */ /* Gestion d'événements empruntée à Peter-Paul Koch http://www.quirksmode.org */ function elementSurvol(id) { function mouseOver (e) { if (typeof e == 'undefined') {var e = window.event;} var source; if (typeof e.target != 'undefined') {source = e.target;} else if (typeof e.srcElement != 'undefined') {source = e.srcElement;} else {return true;} if (source.nodeType == 3) {source = source.parentNode;} /*Safari fix*/ // event processing stuff while(!source.id || source.id!=id) source=source.parentNode; if (/\bmouse_out\b/.test(source.className)) source.className=source.className.replace(/\bmouse_out\b/,' mouse_over '); else source.className+=' mouse_over '; return false; } function mouseOut (e) { if (typeof e == 'undefined') {var e = window.event;} var source; if (typeof e.target != 'undefined') {source = e.target;} else if (typeof e.srcElement != 'undefined') {source = e.srcElement;} else {return true;} if (source.nodeType == 3) {source = source.parentNode;} /*Safari fix*/ // event processing stuff while(!source.id || source.id!=id) source=source.parentNode; if (/\bmouse_over\b/.test(source.className)) source.className=source.className.replace(/\bmouse_over\b/,' mouse_out '); else source.className+=' mouse_out '; return false; } var refElt; if (!id) return false; refElt=document.getElementById(id); if (!refElt) return false; refElt.className+=' mouse_out '; if (refElt.addEventListener) {refElt.addEventListener('mouseover',mouseOver,false); refElt.addEventListener('mouseout',mouseOut,false);} else if (refElt.attachEvent) {refElt.attachEvent('onmouseover',mouseOver); refElt.attachEvent('onmouseout',mouseOut);} return true; } 

Stockez ce programme, sans rien y changer, dans votre espace  Mes Documents/Autres fichiers .

Ajoutez une ligne au pied de page du blog :

 <script type="text/javascript" src="URL_du_programme"></script> 

Remplacez bien sûr URL_du_programme par l'url effective du fichier.

Mise en œuvre

À lui seul ce programme ne change rien à l'aspect du blog, il faut encore indiquer quels éléments du blog vous voulez faire réagir au survol de la souris.

Dotez d'abord chacun de ces éléments (module ou autre) d'un identifiant (comment fait-on ?) s'il n'en a pas déjà un.

Ensuite ajoutez dans le pied de page, après la ligne déjà ajoutée, une nouvelle section script sur le modèle suivant :

 <script type="text/javascript"> elementSurvol('id_d'un_élément'); elementSurvol('id_d'un_autre_élément'); </script> 

Une ligne 'elementSurvol' par élément concerné. Indiquez-y l'identifiant (sans dièse !) de l'élément.

.

Désormais chaque élément mentionné reçoit la classe mouseover ou mouseout selon que la souris est dessus ou pas. À vous de fournir les règles CSS pour utiliser ces deux classes.

Exemples

Exemple bateau : on veut que les modules ainsi traités (et eux seuls) soient dépliés (=comme d'habitude) quand la souris est dessus, réduits à leur titre quand elle n'y est pas. Voilà :

 .mouseout .box-content {display:none} 

Vous voulez changer la couleur de fond de la barre de modules (sans toucher aux modules) quand on la survole ? Supposons que les modules soient à droite comme ici, la sone de blog concernée porte l'identifiant cl_1_1. Écrivez ceci dans le pied de page :

 <script type="text/javascript"> elementSurvol('cl_1_1'); </script> 

et ceci dans le CSS :

 #cl_1_1.mouseover {background-color:un_code_couleur} 

Vous avez compris le principe ?

Petites remarques

D'abord ce gadget ne s'invite pas partout mais seulement dans les éléments que vous indiquez dans les lignes du bas de page. Le reste ne change pas.

Ensuite : si le lecteur de votre blog navigue sans JavaScript il ne verra aucun changement, ni en bien ni en mal – ça vaut mieux.

Enfin et une fois de plus : les classe mouseover et mouseout n'ont que la signification que vous leur donnerez en CSS. Si vous ne complétez pas le CSS le programme ne servira à rien.

Et voilà toute la partie pratique.


Maintenant (seulement si ça vous intéresse), le démontage…

Lire le démontage…

Hé bien je vous renvoie à la section correspondante de l'article cousin ! Voici les différences :

  • il y a deux événements à gérer, onmouseover et onmouseout au lieu d'un seul onclick. Le programme attache donc à l'élément deux gestionnaires au lieu d'un seul ;
  • dans la détection de l'événement, la remontée à la recherche du box est remplacée par une remontée à la recherche d'un élément doté d'un identifiant ;
  • la cuisine des noms de classe est la même, elle est seulement répartie entre les deux gestionnaires ;
  • il n'y a pas d'état initial défini par l'utilisateur : au chargement, la souris est réputée se trouver hors des éléments, donc la classe supplémentaire est mouseout.

ET C'EST TOUT.

… masquer le démontage

Merci une nouvelle fois à Cln pour les tests.


À toutes fins utiles : quelques bonnes adresses pour en savoir plus sur JavaScript.

par Aïe mes doigts ! - dans La gadgetière
commenter cet article

commentaires

sagan33 02/07/2011 22:21


Coucou ! Hé ! bien, cette fois ci, même en suivant à la lettre, rien ne se passe. Le titre des modules ne change pas de couleur au passage de la souris. PG, ce sera pour la prochaine fois. Bonne
soirée à toi.


Archives