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