11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Gérer les relations entre deux éléments selon des évènements

Bonsoir,
J'essaie difficilement de me mettre à du JavaScript propre pour adapter des scripts à l'ancienne (avec du onMouse... un peu partout). Et je n'y comprends pas grand chose. Smiley biggrin

Voilà mon problème : dans une page, j'ai deux listes ; l'une contient des images et l'autre des descriptions qui y sont associées. Ça donne quelque chose du genre
<ul>
<li id="mini1" class="miniature"><img src="image1.jpg"/></li>
<li id="mini2" class="miniature"><img src="image2.jpg"/></li>
...
</ul>
<ul>
<li id="desc1" class="description"><p>Description de l'image 1</p></li>
<li id="desc2" class="description"><p>Description de l'image 2</p></li>
...
</ul>

Le nombre d'éléments étant variable selon les pages (mais toujours avec le couple liste1-liste2).

À l'origine (chargement de la page), les descriptions sont cachées. Au survol de chaque image (liste 1), la description correspondante (liste 2) doit apparaître.
Avec mes vieilles méthodes JS, j'avais une fonction permettant d'afficher un élément selon sa balise et j'intégrais le code au fil de la page. Ainsi, les éléments de la liste 1 devenaient du style
<li id="mini1" class="miniature" onMouseOver="afficheTexte('desc1');"><img src="image1.jpg"/></li>

Ce qui, vous en conviendrez, n'est pas terrible quand on veut faire du code propre et du JS non-obstrusif. Même si ça marche.

J'ai donc commencé à étudier le bouquin de C. Porteneuve "Bien développer pour le web 2.0" pour voir la gestion d'évènements et l'utilisation de la bibliothèque Prototype (plus pratique pour gérer les évènements indépendamment du navigateur).

Et là, je suis complètement perdu.

Je pense que ce qu'il faudrait c'est :
- pour chaque élément de la liste 1 (récupération d'un tableau en fonction de la classe "miniature" ? ou gestion manuelle d'autant d'observateurs que j'ai d'éléments dans ma liste), mettre un observateur d'évènement lançant une fonction d'affichage
- la fonction d'affichage devant récupérer l'Id de l'élément déclencheur (comment ?), en déduire l'Id de l'élément cible (remplacer "mini" par "desc") et changer la propriété CSS "display" de celui-ci

Autant je vois à peu près comment remplacer l'élément déclencheur par autre chose, autant je ne vois pas comment récupérer son Id pour pouvoir cibler un autre élément.

Est-ce que quelqu'un aurait un exemple de code pour ma situation ?
Modifié par terzag (24 Jun 2007 - 13:25)
Si tous les id de ta liste d'images s'appellent miniN et ceux de ta liste de descriptions descN, je pensais à ce genre de fonction :


function miniOnmouseover () {
var id = this.id;
var index = parseInt(id.substring(4));
var desc = document.getElementById('desc' +index);
...
}

Comme ça tu récupères l''élément de description correspondant à la miniature.
Ah oui, ça marche. J'ignorais qu'on pouvait récupérer l'Id avec une instruction aussi simple que this.id.

Merci ! Smiley biggrin

Il y a juste un point de détail que j'ai dû contourner et je ne comprends pas pourquoi. J'ai une fonction "afficheId(Id)" qui s'occupe d'afficher l'objet dont l'Id est passée en paramètre.
Si j'utilise ton code de la façon suivante, ça ne marche pas :
var desc = document.getElementById('desc' +index);
afficheId(desc);

Par contre, si je passe outre la variable desc et que je la "construis" en paramètre de la fonction, ça marche :
afficheId('desc'+index);


Je suis sûr qu'il y a une explication à ça, mais elle m'échappe (type de données ?).

EDIT : je pense avoir compris : au lieu d'une chaîne de caractères (mon code), je passe un objet de type Id avec ton code, c'est ça ? Et donc dans ma fonction ça n'a aucun sens de faire un getElementById sur un objet de type Id.
Modifié par terzag (22 Jun 2007 - 10:15)
J'ai encore un petit souci : la solution donnée plus haut ne semble pas marcher sous Internet Explorer (ou c'est la façon dont je l'utilise qui ne lui plaît pas).

À la ligne var id= this.id, IE récupère une valeur indéfinie au lieu de l'Id de l'élément.

J'ai fait le test sous IE 6 et 7.
Tu utilises attachEvent ?
Il faudrait la fonction qui enregistre les évènements, je pense que le problème vient de là.
En fait j'utilise la bibliothèque Prototype pour gérer les événements (apparemment plus simple pour ne pas se prendre la tête entre IE et le reste du monde, sauf qu'il y a certaines spécificités qui en dépendent).
Je suis en train d'étudier tout ça pour voir comment elle peut être manipulée pour ce que je veux.
Voilà le code complet qui gère mes apparitions/disparitions de texte
function raz(){
    cacheId('desc1');
    cacheId('desc2');
    cacheId('desc3');
    cacheId('desc4');
    cacheId('desc5');
}
function afficheId(baliseId){
    if(document.getElementById
    && document.getElementById(baliseId) != null){
        document.getElementById(baliseId).style.display='block';
    }
}
	
function cacheId(baliseId){
    if(document.getElementById
    && document.getElementById(baliseId) != null){
        document.getElementById(baliseId).style.display='none';
    }
}

function init(){
    Event.observe('mini1','mouseover',afficheTexte);
    Event.observe('mini2','mouseover',afficheTexte);
    Event.observe('mini3','mouseover',afficheTexte);
    Event.observe('mini4','mouseover',afficheTexte);
    Event.observe('mini5','mouseover',afficheTexte);

    function afficheTexte(event){
        raz();
        var id=this.id;
        var index=parseInt(id.substring(4));
        afficheId('desc'+index);
    }
}
Event.observe(window,'load',init);


Bon, il y a des trucs probablement pas très propres (plutôt que de générer les lignes de la remise à zéro et les observateurs d'évènements via PHP, ça doit être faisable assez facilement avec une ou deux instructions JavaScript générales), mais c'est pas le plus gros problème actuellement.
Oui, oui, pas de problème (le code donné dans mon message d'origine avait été volontairement raccourci). Cela dit, je ne vois pas bien en quoi ça pourrait avoir des conséquences sur le code JavaScript s'il n'y avait pas d'attribut alt de défini ?

Apparemment, IE ne sait pas gérer this.id et je cherche comment récupérer l'id via les fonctions de Prototype.
Très bien, si tu as résolu ton problème, je t'invite à l'indiquer dans le titre du sujet en éditant ton premier message.

Il s'agit apparament d'un moyen mis à disposition par la bibliothèque prototype. C'est très bien qu'ils y aient pensé, mais ce problème de this m'intrigue tout de même. J'aimerais bien voir où se trouve le bug à la source, j'aimerais bien creuser un peu plus loin, en somme.
Est-ce que tu peux poster le contenu de la fonction Event.observe (s'il n'est pas trop long bien sûr) ?
Merci.

P.S. Corrige le lien pour éviter d'avoir à passer par une 404
QuentinC a écrit :
C'est très bien qu'ils y aient pensé, mais ce problème de this m'intrigue tout de même. J'aimerais bien voir où se trouve le bug à la source, j'aimerais bien creuser un peu plus loin, en somme.
Est-ce que tu peux poster le contenu de la fonction Event.observe (s'il n'est pas trop long bien sûr) ?


Je ne la trouve pas telle quelle dans Prototype. Et ce n'est pas évident de retracer la façon dont il étend les méthodes de certains objets (le script fait dans les 3000 lignes).
Modifié par terzag (24 Jun 2007 - 13:33)
Ourghf... ah d'accord.
Bon bah tant pis, c'était juste une question de curiosité. Je parie que c'est parce qu'ils utilisent attach/detachEvent avec IE.
Sujet clos
Aller à