Version complète: sur le forum Webmaster Hub : Changer une image et son lien
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
pedia
samedi 26 juillet 2008 à 11:06
Bonjour,

Voilà ce que j'ai : 2 tabs côte à côte, la premiere pour une image, la deuxieme pour du texte

Ce que je sais faire : lorsque je fais un mouse over sur un mot en particulier, l'image swap pour une autre, et ce pour pleins de mots différents.

Ce que je souhaiterais faire, mais sans y arriver : je souhaiterais que le lien de l'image change en fonction de l'image qui est apparue.

En gros, quand je passe sur le mot "A", l'image "A" s'affiche et quand je clique dessus je vais sur A.html et quand je passe sur le mot "B", l'image "B" s'affiche et quand je clique dessus je vais sur B.html.

Je ne pense pas que cela soit très compliqué, mais je bloque un peu.

Merci d'avance à ceux qui pourront m'aiguiller.


Callisto
lundi 28 juillet 2008 à 14:29
Il s'agit de manipulation du DOM, autrement dit, lecture et écriture dynamique du code source de la page. Ma première remarque c'est qu'il faudrait absolument passer par un framework JavaScript parce que ton code sera plus simple à écrire, plus lisible et infiniment plus compatible entre les navigateurs que ce que tu pourrais faire en JavaScript "nu".

Des frameworks il y en a plein : jQuery, Prototype, Mootools, Dojo, etc.

Mon préféré : Mootools.

Voilà comment je coderais en Mootools la fonctionnalité dont tu as besoin :

Le code HTML
CODE
<div id="texte">
Lorem <span>ipsum</span> dolor sit amet, <span>consectetuer</span> adipiscing elit. <span>Morbi</span> luctus, nibh malesuada <span>sodales</span> varius, orci lorem condimentum purus, quis varius arcu <span>magna</span> quis purus.
</div>

<img id="image" src="" />
<a id="lien" href="" />


Le code JavaScript (ne pas oublier d'inclure la bibliothèque Mootools)
CODE
//On récupère la liste de tous les mots "réactifs" du texte
$$("#texte span").each(function(el) {

//Ajout d'un évènement "mouseover" au mot réactif courant
        el.addEvent("mouseover", function() {

//Récupération du mot en minuscules (pour éviter les problèmes de nommage des fichiers images par exemple)
            var mot = this.getText().toLowerCase();

//Modification de l'attribut "href" du lien en fonction du mot réactif
            $("lien").setAttribute("href", mot + ".html");

//Modification du contenu du lien en fonction du mot réactif
            $("lien").setText(mot);

//Modification de l'attribut "src" de l'image en fonction du mot réactif
            $("image").setAttribute("src", mot + ".jpg");

//Modification de l'attribut "alt" (utile pour l'accessibilité et le référencement) de l'image en fonction du mot réactif
            $("image").setAttribute("alt", mot);
    });
});


Le code MooTools c'est du 1.11, mais il se peut qu'il soit compatible avec 1.2, à tester.
Il se peut également que ton code HTML soit très différent de celui que j'ai donné en exemple qui est très minimaliste, mais j'espère que tu comprendras la logique et que tu pourras l'adapter à ton besoin.

Bonne chance !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.