Activer/Désactiver un lien

**Deallyra** · 14/06/2007, 09h29

Bonjour,

Le titre n'est pas très explicite mais je n'arivais pas à savoir ce que je pouvais mettre...
Voilà, j'ai eu une idée... Mais je ne sais pas si c'est faisable...
Donc je vous la soumet, en espérant une aide si jamais c'est possible de coder en JS...

J'ai 6 images. On va dire deux groupes de trois.
En gros :

Code html :

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

1
2
3
4
5
6
7
8
 
<img src = "image1.jpg" alt = "image1" />
<img src = "image2.jpg" alt = "image2" />
<img src = "image3.jpg" alt = "image3" />
<br />
<img src = "image4.jpg" alt = "image4" />
<img src = "image5.jpg" alt = "image5" />
<img src = "image6.jpg" alt = "image6" />

A la base, on a Image 1 et 4 d'actives.
Euh...

Je cliques sur l'image 1 et voici ce qui se passe.
les images 2 et 3 sont remplacées par image2bis_on et image3bis_on
les images 5 et 6 sont remplacées par image5_off et image6_off

Si je cliques sur l'image 4,
les images 5 et 6 sont remplacées par image5bis_on et image6bis_on
les images 2 et 3 sont remplacées par image2_off et image3_off

On et Off correspondent au fait que l'on puisse cliquer ou non sur l'image pour se rediriger vers une nouvelle page.
On correspondrait à une image cliquable et Off à une image grisée non cliquable...
En gros, "on" 'activerait' la balise <a href="lien"> et off la 'désactiverait'...

Est-ce possible de faire quelque chose dans ce genre avec JS?

Je pensais à la propriété onclick() mais je ne vois pas comment faire...

Merci à ceux qui se pencheront sur ce problème.

**E.Bzz** · 14/06/2007, 09h32

Bonjour,

Envoyé par MimiCracra44

En gros, "on" 'activerait' la balise <a href="lien"> et off la 'désactiverait'...

Est-ce possible de faire quelque chose dans ce genre avec JS?

Je pensais à la propriété onclick() mais je ne vois pas comment faire...

tu pourrais simplement modifier le href : activé => href="ton_url.html" et désactivé => href="#"
Tu peux modifier le pointeur pour matérialiser la désactivation à l'affichage ...

A+

**Deallyra** · 14/06/2007, 09h57

et comment je dois faire pour assurer ce changement d'état d'url?

pour changer le pointeur, je sais faire...

Mais je ne connais rien des conditionelles JS...
ou des suites d'actions...

je pense à un truc dans ce genre

Code html :

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

1
2
 
<img src ="image1" onclick="return image1()"

je sais qu'ensuite je dois faire

Code Javascript :

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

1
2
3
4
5
 
function image1()
{  
	traitement
}

mais c'est le traitement que je n'arrive pas à modéliser...
Comment lui dire que le src sera égal à # ? ou à une URL renvoyant vers une autre page?
comment permuter les images?
Parce qu'il me faut changer d'image selon que j'ai cliqué sur 1 ou 6

**E.Bzz** · 14/06/2007, 10h04

Envoyé par MimiCracra44

Mais je ne connais rien des conditionelles JS...
ou des suites d'actions...

Ah, oui, effectivement je vois le pb

Pas le temps tout de suite (faudra un peu + de 2 lignes

), mais si tu n'as toujours rien dans la matinée, j'essaye de te le faire ...

A+

**Deallyra** · 14/06/2007, 10h08

Merci

**E.Bzz** · 14/06/2007, 12h15

Bon, juste une version de départ.
En préambule :
J'ai pas bien compris la logique des enchaînement, donc j'ai fait une traduction "littérale" de tes explications.
Je ne connaissais pas l'état de départ des images et liens (on / off).
Je ne sais pas ce que tu souhaites lors d'un 2° clic sur la même image.
Y a moyen de rendre le script + propre, mais pour la compréhension je laisse comme ça.

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
30
31
32
33
34
35
36
37
38
39
40
41
<head>
<script type="text/javascript">
<!-- 
function ChgImages(objImg) {
	switch (objImg.id) {
		case "img1" :
			document.getElementById('img2').parentNode.href='url2.html';
			document.getElementById('img2').src='image2bis_on.jpg';
			document.getElementById('img3').parentNode.href='url3.html';
			document.getElementById('img3').src='image3bis_on.jpg';
 
			document.getElementById('img5').parentNode.href='#';
			document.getElementById('img5').src='image5_off.jpg';
			document.getElementById('img6').parentNode.href='#';
			document.getElementById('img6').src='image6_off.jpg';
			break;
 
		case "img4" :
			document.getElementById('img2').parentNode.href='#';
			document.getElementById('img2').src='image2_off.jpg';
			document.getElementById('img3').parentNode.href='#';
			document.getElementById('img3').src='image3_off.jpg';
 
			document.getElementById('img5').parentNode.href='url5.html';
			document.getElementById('img5').src='image5bis_on.jpg';
			document.getElementById('img6').parentNode.href='url6.html';
			document.getElementById('img6').src='image6bis_on.jpg';
			break;
	}
}
-->
</script>
</head>
<body>
<img id="img1" src = "image1.jpg" alt = "image1" onclick="ChgImages(this);"/>
<a href="#"><img id="img2" src = "image2.jpg" alt = "image2" /></a>
<a href="#"><img id="img3" src = "image3.jpg" alt = "image3" /></a>
<br />
<img id="img4" src = "image4.jpg" alt = "image4" onclick="ChgImages(this);"/>
<a href="#"><img id="img5" src = "image5.jpg" alt = "image5" /></a>
<a href="#"><img id="img6" src = "image6.jpg" alt = "image6" /></a>

A faire évoluer, donc

A+

Activer/Désactiver un lien

JavaScript

Vue hybride

Discussions similaires

Partager

Partager