11548 sujets

JavaScript, DOM et API Web HTML5

Il me manque quelque chose mais quoi ?

Bonjour à tous,

J'ai ce petit bout de script :


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
        if (document.getElementById('legende')) {document.getElementById('legende').style.display='none';}
if (d) {d.style.display='block';}
}

window.onload=montre2;
function montre2(id) {
var d2 = document.getElementById(id);
        if (document.getElementById('legende2')) {document.getElementById('legende2').style.display='none';}
if (d2) {d2.style.display='block';}
}

window.onload=montre3;
function montre3(id) {
var d3 = document.getElementById(id);
        if (document.getElementById('legende3')) {document.getElementById('legende3').style.display='none';}
if (d3) {d3.style.display='block';}
}//-->
</script>

<div id="secondaire">
          <dd style="display:none" id="legende"> Texte </dd>
          <dd style="display:none" id="legende2"> Texte2 </dd>
          <dd style="display:none" id="legende3"> Texte3 </dd>
          </div>
<div id="principal">
          <a href="#"><img src="images/danger.png" onmouseover="javascript:montre('legende');"/></a>
          <br />
          <a href="#"><img src="images/danger2.png" onmouseover="javascript:montre2('legende2');" /></a>
          <br />
          <a href="#"><img src="images/danger3.png"  onmouseover="javascript:montre3('legende3');" /></a>
          </div>


Pour vous l'expliquer en quelques mots :

Quand je passe la souris sur mon image danger.png, le contenu de l'id="legende" s'affiche.
Idem pour pour danger2.png qui affiche le contenu de l'id="legende2" et danger3.png qui affiche le contenu de l'id="legende3".

Le problème est que si je passe sur les images les une après les autres, les 3 légendes restent affichées.
Je voudrais simplement une sorte de "clear", c'est à dire que si je passe sur danger2.png la légende affichée précédement d'efface et laisse place à la nouvelle légende ?
La solution pourrait être de faire un 
onmouseout="javascript:montre3('');
mais le problème est que la légende doit rester affichée car elle est susceptible de contenir un lien et disparaitre au survol d'une autre image.


Pensez-vous pouvoir m'aider ?

Merci
Modifié par superdje83 (28 Feb 2010 - 17:23)
Bonjour,

Le premier problème que je vois est que le code HTML est pourri.
Tu as des DD mal utilisés, en dehors de tout DL et pas accompagnés de DT.
Pour rappel, les listes de définitions en HTML sont définies ici:
http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.3

Autre problème avec le code HTML: tu as des images sans attribut alt (et donc pas de texte alternatif pertinent... car pas de texte alternatif tout court).

Avant de rajouter une surcouche JavaScript, avoir un code HTML correct serait pas mal. Smiley cligne
Bonsoir,

Oui je me suis dit que ce n'était pas la bonne solution pour les DD, je me suis donc retourné vers du UL et LI.

Pour l'autre problème html, je doute que tu utilise un code HTML correct pour faire des tests. Personnellement, si je devais faire un code valide W3C et WAI à chaque test, je ne serais pas très rentable.

On peut donc passer à l'étape de la surcouche JavaScript . Smiley cligne
superdje83 a écrit :
Pour l'autre problème html, je doute que tu utilise un code HTML correct pour faire des tests.

Heu... dans l'ensemble, si.
superdje83 a écrit :


Pour l'autre problème html, je doute que tu utilise un code HTML correct pour faire des tests. Personnellement, si je devais faire un code valide W3C et WAI à chaque test, je ne serais pas très rentable.


Pas mieux que Florent. Produire un code HTML correct pour les tests ne prend pas plus de temps: comme de toute manière tu devras faire du code correct en production, autant se payer la réflexion sur le balisage une seule fois...

Mais ce n'est pas ce qui va empêcher un script de fonctionner. Plus précisément, si ton code HTML respecte un DOM (imbrication correcte des balises et écriture correcte des attributs), alors le javascript devrait marcher.

superdje83 a écrit :
On peut donc passer à l'étape de la surcouche JavaScript . Smiley cligne


Passons quand même à la surcouche JS. Il est tout à fait compréhensible que tes légendes restent affichées. Par exemple, quand tu appelles montre2, tu commences par créer d2, puis tu caches l'image d'identifiant legende2, puis tu fais apparaître d2. Mais comme tu as écrit ton code, d2 désigne l'élément d'identifiant legende2...

Il y a plusieurs choses à revoir sur ton script:
1. il faudrait qu'il marche au clavier, donc doubler tous tes événements mouseover par des onfocus, et des mouseout par des onblur.
2. Si tu veux que tes éléments puissent recevoir le focus clavier, il faut placer tes événements sur les éléments a, et pas les images.
3. Il n'est pas facilement maintenable: si un jour tu ajoutes une image, il faudra créer une autre fonction JS.

Une solution plus simple consisterait à donner un id unique à chaque lien, par exemple alegende1, alegende2, puis de lancer au survol (et au focus...) une fonction JS qui à partir de l'identifiant du lien, à coup de substring recrée l'identifiant de la légende à afficher. Mais avant de l'afficher, pour être tranquille, tu fais une boucle sur toutes tes légendes pour les cacher (je sais, c'est bourrin mais en première approche c'est plus facile à implémenter qu'une variable globale qui conserverait l'id de la légence actuellement affichée..). Ainsi, si tu ajoutes une image, tu n'auras qu'à ajouter une légende et un lien dans le code HTML, et pas à toucher le JS.
Modifié par Gilles (01 Mar 2010 - 10:05)
Sujet clos
Aller à