11543 sujets

JavaScript, DOM et API Web HTML5

Effet hover en javascript , apprentissage .

Bonjour à tous,

Ayant créé un site internet et après l'avoir soumis aux critiques ici sur le forum, http://forum.alsacreations.com/topic-18-46399-1-Site-de-restaurant-italien-mon-premier-site--httpgiardiniitaliach.html, je voudrais effectuer un hover sur les liens du menu ceci pour garantir l'accessibilité de mon site .

J'ai commencé à lire ce post : http://www.alsacreations.com/tuto/lire/562-bonnes-pratiques-javascript.html et j'y ai trouvé un exemple de rollover qui fonctionne également avec la navigation au clavier .

Je l'ai étudié, je pense compris, mais il y a un point qui n'est pas clair.

Il s'agit du script suivant : 



[code=javascript]<a href="#" id="test">lien test</a> 
 
<script type="text/javascript"><!-- 
 
// Rollover sur un élément 
function fnRollOver(sId, sCSS, sOverCSS) 
{ 
   // Test de la méthode utilisée 
   if(!document.getElementById) return; 
 
   // Identification de l'élément 
   var oElem = document.getElementById(sId); 
   if(!oElem) return; 
 
   // Définition de la classe CSS d'origine 
   oElem.className = sCSS; 
 
   // Comportement au survol ou à la prise du focus 
   oElem.onmouseover = function() { oElem.className = sOverCSS; }; 
   oElem.onfocus = function() { oElem.className = sOverCSS; }; 
 
   // Retour à l'état d'origine 
   oElem.onmouseout = function() { oElem.className = sCSS; }; 
   oElem.onblur = function() { oElem.className = sCSS; }; 
} 
// Lancement de la fonction fnRollOver() 
fnRollOver('test', 'CSS', 'OverCSS'); 
 
//--></script>


J'ai été dans la source de la page, et j'ai remarqué que le script utilisé pour l'exemple était légèrement différent : 



[code=javascript]<a href="#" id="test">lien test</a><script type="text/javascript"><!--

function fnRollOver(sId, sCSS, sOverCSS)
{
   if(!document.getElementById) return;

   var oElem = document.getElementById(sId);
   if(!oElem) return;

	oElem.style.color = sCSS;

	oElem.onmouseover = function() { oElem.style.color = sOverCSS; };
	oElem.onfocus = function() { oElem.style.color = sOverCSS; };

	oElem.onmouseout = function() { oElem.style.color = sCSS; };
	oElem.onblur = function() { oElem.style.color = sCSS; };
}
fnRollOver('test', '#4D98DC', '#F90');

//--></script>


On peut voir que les lignes 
[code=javascript]oElem.className = sCSS;
et 
[code=javascript]oElem.style.color = sCSS;
sont différentes, pourquoi ?

Si je reprends le deuxième script, donc celui provenant du code source de la page, donc de l'exemple, voilà ce que je comprends :

- On créé tout d'abord un lien en code html et lui attribuera l'ID test .

- On écris le script javascript, je me suis posé la question de la raison pour laquelle l'appelle de la fonction est placée après le script en lui-même, mais en fait j'imagine, en toute logique, que c'est pour faire en sorte que le script soit lu par le navigateur avant que la fonction ne soit appelée.

- Le navigateur sait maintenant que si le curseur de la souris ou un déplacement par clavier intervient sur le lien qui comporte l'identifiant test, qu'il doit agir en conséquence .

Par contre, je ne comprends pas l'utilité du terme function () dans la ligne suivante : 
[code=javascript]oElem.onmouseover = function() { oElem.style.color = sOverCSS; };


Merci beaucoup de votre aide .
Modifié par marc.suisse (04 Feb 2010 - 10:56)
Hello,

marc.suisse a écrit :
je voudrais effectuer un hover sur les liens du menu ceci pour garantir l'accessibilité de mon site.
En fait le problème d'accessibilité est double et le :hover n'y changera rien. Tes liens de menu actuels sont sous la forme :
<li><a id="accueil" class="actuel" href="index.php" title="Vers page accueil"></a></li>
et l'image est en background CSS. Il en résulte que tes liens sont vides. Il suffit que les CSS ou les images soient désactivées et on ne peut plus accéder à rien.

Soit il faut mettre du texte :
<li><a id="accueil" class="actuel" href="index.php" title="Vers page accueil">Accueil</a></li>
et les CSS servent à styler le background.

Soit c'est une image qui porte l'information et il faut utiliser l'attribut alt :
<li><a id="accueil" class="actuel" href="index.php" title="Vers page accueil"><img src="accueil.gif" alt="Accueil" /></a></li>


En l'occurrence le script que tu as choisi n'est pas le bon puisqu'on pourrait faire exactement la même chose en simple css. A partir du moment où tu utilises des images il faut effectivement gérer les évènements JavaScript onmouseover et onfocus sur tes liens mais le script doit substituer l'image (en modifiant l'attribut src). Il existe de nombreux scripts sur le Web qui font cela (ou tu peux te baser sur celui-ci que j'ai fait pour ce site).

marc.suisse a écrit :
On peut voir que les lignes [...] sont différentes, pourquoi ?
Parce que l'un des scripts modifie la classe CSS alors que l'autre modifie directement la couleur.

marc.suisse a écrit :
Par contre, je ne comprends pas l'utilité du terme function () dans la ligne suivante...
Il s'agit d'une fonction anonyme.
Modifié par Heyoan (04 Feb 2010 - 11:33)
Bonjour messieurs, merci d'avoir pris la peine de me répondre Smiley cligne

Luleen=> Je vais jeter un coup d'oeil à ton lien Smiley smile

Heyoan=> Si je prends les exemples que tu m'as donné,

Heyoan" a écrit :
Soit il faut mettre du texte :


[code=javascript]<li><a id="accueil" class="actuel" href="index.php" title="Vers page accueil">Accueil</a></li>


Dans ce cas là, si je regarde le résultat, je remarque que le mot Contact vient se placer au-dessus de l'image, ce qui n'est pas le but recherché.

upload/26457-ex.JPG

Heyoan a écrit :
Soit c'est une image qui porte l'information et il faut utiliser l'attribut alt
:


[code=javascript]<li><a id="accueil" class="actuel" href="index.php" title="Vers page accueil"><img src="accueil.gif" alt="Accueil" /></a></li>


Mais dans ce cas là, j'imagine qu'il y a aura le temps de chargement de l'image :hover qui va poser problème, j'avais d'ailleurs utiliser la technique des portes coulissantes pour remédier à ce problème .

Sauf si on peut l'inclure également dans ce dernier exemple .

Donc en l'occurrence, pour garantir une accessibilité en cas de désactivation des images ou du css et éviter la latence de chargement des images du :hover, il faut passer par le javascript, en tout cas je le comprends comme ça.

Pour finir, étant donné que je ne suis qu'un débutant en javascript, j'avoue n'avoir pas bien compris la différence entre le script que j'ai mis dans mon premier message et la méthode que tu as utilisé et mis en lien dans le message .

Je vais m'y replonger, peut être que j'ai mal compris quelque chose Smiley cligne

Et merci pour les autres explications, c'est sympa .
Modifié par marc.suisse (04 Feb 2010 - 13:18)
marc.suisse a écrit :
Bonjour messieurs
J'aurais tendance à dire au vu de l'avatar et du pseudo que Luleen n'est pas un monsieur. Smiley cligne

marc.suisse a écrit :
Donc en l'occurrence, pour garantir une accessibilité en cas de désactivation des images ou du css et éviter la latence de chargement des images du :hover, il faut passer par le javascript, en tout cas je le comprends comme ça.
Non : une page doit être accessible sans JavaScript (dans le cas contraire on parle de JavaScript intrusif). En clair le contenu doit se trouver dans le code HTML (soit sous forme de texte - Accueil - soit en utilisant l'attribut alt de l'élément IMG - alt="Accueil" -). Dans ce dernier cas le JavaScript sert à modifier l'image sur le onmouseover et sur le onfocus (en modifiant l'attribut src de l'élément IMG) et permet éventuellement de supprimer la latence en préchargeant les images de hover (c'est le cas du script que je t'ai proposé).

marc.suisse a écrit :
j'avoue n'avoir pas bien compris la différence entre le script que j'ai mis dans mon premier message et la méthode que tu as utilisé et mis en lien dans le message .
Eh bien ils n'ont rien à voir : le premier modifie des propriétés css alors que le second modifie l'image dans le code HTML. Smiley murf
Oups, c'est vrai que je n'ai pas fais attention, Luleen excuses moi Smiley cligne

Merci sinon pour les explications, je comprends mieux maintenant.

Sympa de m'avoir répondu aussi vite Smiley lol

Je vais procéder et publierais ici le script modifié .

Je vous tiens au jus .
Bonjour à tous Smiley cligne

J'ai étudié un peu le script javascript fourni par Heyoan, mais malheureusement malgré ma bonne volonté, les bases de ce langage me manque pour bien le comprendre .

Je constate que la première partie de ce script est directement lié à l'appellation DOM.

Par exemple, dites moi si je ma logique de compréhension est erronée,

On commence par ce code : 

[code=javascript]var W3CDOM = document.getElementById && document.getElementsByTagName;


On déclare la variable W3CDOM qui prendra la valeur true ou false suivant si document.getelementbyid et getelementbytagename sont bien pris en compte par le navigateur .

Ensuite on descend tout en bas du script, j'imagine pour laisser le script charger par le navigateur, car si on implantait la condition avant, elle ne saurait pas de quoi il s'agit.

On trouve la condition : 

[code=javascript]
if(W3CDOM) { addEvent(window, 'load', oRollover._Init, false); }


Je comprends que si la variable W3CDOM comporte la valeur true, on lance la fonction addevent et lui envoie 4 arguments .

Voici la fonction : 

[code=javascript]function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}


D'après mes recherches, cette fonction est utiliser pour harmoniser la gestion des événements entre navigateur : http://www.ligams.com/Publications/Javascript/Evenement-javascript-addEventListener-attachEvent

Je remarque que je ne n'arrive pas très bien à comprendre l'appellation DOM, mais d'après ce que j'ai trouvé sur google, il s'agirait d'un pseudo standard qui permet une certaine compatibilité "d'agissement" de navigateur .

Plus clairement, c'est pour éviter que 2 navigateurs réagissent différemment à un script donné.

Auriez-vous la gentillesse de me dire si mes explications tiennent la route ou si je risque l'accident ? Smiley lol

Merci d'avance .
Modifié par marc.suisse (05 Feb 2010 - 16:06)
Hello,

hem... je constate que tu es très rigoureux (ce qui est une belle qualité pour un développeur Smiley cligne ) mais à ce rythme là ton sujet va finir en tutorial JavaScript et va faire 10 pages !

Je t'invite donc à chercher de bons tutos sur le JavaScript (et sur le DOM). Par exemple ceux proposés en Liens complémentaires dans l'article Comment bien coder en Javascript. L'article en lui-même ainsi que JavaScript : organiser son code en modules et La gestion des événements en JavaScript sont très intéressants mais pas forcément évidents à comprendre pour débuter.

Concernant ta question sur la variable W3CDOM tu peux regarder ce sujet.

Pour finir quelques infos supplémentaires sur mon script :
* les images du menu ont 3 états différents (normal / hover / en cours)
* elles sont toutes placées dans le même répertoire qui est défini dans le script (ici img_rollover )
* on spécifie également les préfixes des états hover (hov_) et en cours (enc_)
* donc les images pour le lien contact doivent être :
contact.png
hov_contact.png
enc_contact.png
Salut, merci de la rapidité de ta réponse.

Effectivement, vu la tournure que je fais prendre à mon post, on est pas sortis de l'auberge Smiley langue

je vais donc suivre tes conseils et lire les liens que tu m'as fournis .

Merci encore de ta disponibilité Smiley cligne
Sujet clos
Aller à