apparition photo lors du clique sur le texte

Version imprimable

Bonjour a tous, j'espère être dans la bonne session puisque je ne c'est pas trop comment réaliser ce que je veux faire...
Voila j'ai un petit souci j'aimerai que lorsque je clique sur un texte une image correspondant apparaisse a gauche.
Je m'explique, voila un petit exemple j'aurai une liste correspondant a différents secteurs d'activités comme sa!

- premier texte
- deuxième texte
- troisième texte
- quatrième texte
- ....

J'aimerai que lorsque je clique sur sur un des texte la photo correspondant apparaisse a gauche que après si on clique sur un autre texte la photo se remplace par celle qui y est déjà et ainsi de suite

J'ai trouvé un petit bout de code qui permet de "switcher" entre Afficher/Cacher une photo mais le souci est que chaque photo est indépendante lorsque je clique sur le texte 1 la photo 1 s'affiche, lorsque je clique sur le texte 2 la photo 2 s'affiche aussi mais en dessous la photo 1 au lieu de la remplacer.

voila le petit bout de code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <script type="text/javascript"> // La fonction de base pour modifier le style d'affichage d'un élément function Affiche(id,type) { try { document.getElementById(id).style.display = type; } catch (err) { if (err.message != 'document.getElementById(id) has no properties') { throw err; } } } // Fonction pour "switcher" entre Afficher/Cacher function Switcher(id, type) { switch (document.getElementById(id).style.display) { case type: Affiche(id, 'none'); break; default : Affiche(id,type); break; } } </script> <a onclick='Switcher("image1", "block")' class="test">Mon texte</a> <img src="image1.jpg" id="image1" class="cache" /> <a onclick='Switcher("image2", "block")' class="test">Mon texte2</a> <img src="image2.jpg" id="image2" class="cache" />
et le code css:

Code:

.cache {display:none;}

En espérant que j'ai été assez clair
Merci

Salut,
Tu te compliques la vie pour pas grand chose.
Au lieu d'avoir plusieurs images que tu affiches ou cache, tu ferais mieux d'en avoir une seule dont tu modifies la propriété src en fonction du click.
Par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> // La fonction de base pour modifier le style d'affichage d'un élément function Affiche(photo) { try { document.getElementById('image').src = 'image' + photo + '.jpg'; } catch (err) { if (err.message != 'document.getElementById(id) has no properties') { throw err; } } } </script> <img src="image1.jpg" id="image" /> <a onclick='Affiche(1)' class="test">Mon texte</a> <a onclick='Affiche(2)' class="test">Mon texte2</a>
Dans l'exemple, une image par défaut est affichée mais ça peut se modifier facilement.
Tu noteras aussi que j'ai modifié le nom du paramètre, id étant particulièrement inapproprié puisque c'est un mot clé de JavaScript !

14/05/2009, 14h34
yamaha12

merci pour l'astuce Bovino mais je n'arrive pas a faire fonctionné ton code je suis vraiment novice en javascript. Pourrais tu m'expliquer le principe, j'ai testé pas mal de chose mais rien ni fait. Je pensais surtout que niveau de cette ligne:

Code:

<a onclick='Affiche(1)' class="test">Mon texte</a>

Il fallait changer le "1" par le nom de la photo comme "photo1" ou "photo1.jpg" mais sa ne marche, j'ai testé aussi autre choses en vain...

Merci

Si cela peut te simplifier "la vie" modifie légèrement le code de Bovino comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
// La fonction de base pour modifier le style d'affichage d'un élément
function Affiche(photo) {
	try	{
	//document.getElementById('image').src = 'image' + photo + '.jpg';
	document.getElementById('image').src = photo;
	}
	catch (err) {
		if (err.message != 'document.getElementById(id) has no properties') {
			throw err;
		}
	}
}

...

<a onclick='Affiche("image1.jpg")' class="test">Mon texte</a>

</script>

14/05/2009, 14h45
yamaha12

a ok merci je vois maintenant le truc j'avais pas pigé
merci a tous affaire résolu :yaisse2::yaisse2: