Discussion :

[yamaha12]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

.cache {display:none;}

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

[Bovino]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[devyan]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[yamaha12]

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