Changer une image et son lien

[pedia]

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]

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

<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)

//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 !