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+

**Deallyra** · 14/06/2007, 15h24

Merci pour le code...
mais...
j'ai testé ç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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<table id="paragraphe">
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite3').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite3').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite3" src="Image/desactived.gif" alt = "" />
			</a>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite4').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite4').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite4" src="Image/desactived.gif" alt = "" />
			</a>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite2').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite2').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite2" src="Image/desactived.gif" alt = "" />
			</a>
        </td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite5').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite5').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite5" src="Image/desactived.gif" alt = "" />
			</a>
        </td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
			<a	href = "index.php?espace=jeune"
				onmouseover = "document.getElementById('satellite1').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite1').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite1" src="Image/onmouseout.gif" alt = "" onclick="ChgImages(this);" />
			</a>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
            <img src = "Image/Borg_Center2.gif" alt = "" colspan = 2 />
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "index.php?espace=entreprise"
				onmouseover = "document.getElementById('satellite6').src = 'Image/sa_entreprise.gif'; "
				onmouseout = "document.getElementById('satellite6').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite6" src="Image/onmouseout.gif" alt = "" onclick="ChgImages(this);" />
			</a>
        </td>
	</tr>
</table>

avec ton code de fonction JS et... euh j'y arrive pas

bien sûr, j'ai modifier les ID

**E.Bzz** · 14/06/2007, 15h47

Envoyé par MimiCracra44

j'y arrive pas

Pourquoi ?
Qu'est-ce qui bloque ?
Tu arrives pas à adapter ou c'est adapté mais ça plante ?

Ton code JS dans les tags a l'air bon pourtant ...
Ils fonctionnent tes onmouseover / onmouseout ?

A+

**Deallyra** · 14/06/2007, 16h05

en fait, mes onmouseover et onmouseout prennent le dessus sur le reste...
le code JS est adpaté

Code Javascript :

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
 
function ChgImages(objImg) 
{
	switch (objImg.id) 
	{
		case "satellite1" :
			document.getElementById('satellite2').parentNode.href='V_BTS.php';
			document.getElementById('satellite2').src='onmouseout.gif';
			document.getElementById('satellite3').parentNode.href='V_Contact_Jeune.php';
			document.getElementById('satellite3').src='onmouseout.gif';
 
			document.getElementById('satellite5').parentNode.href='#';
			document.getElementById('satellite5').src='desactived.gif';
			document.getElementById('satellite6').parentNode.href='#';
			document.getElementById('satellite6').src='desactived.gif';
			break;
 
		case "satellite4" :
			document.getElementById('satellite2').parentNode.href='#';
			document.getElementById('satellite2').src='desactived.gif';
			document.getElementById('satellite3').parentNode.href='#';
			document.getElementById('satellite3').src='desactived.gif';
 
			document.getElementById('satellite5').parentNode.href='V_Contrat_Professionalisation.php';
			document.getElementById('satellite5').src='onmouseout.gif';
			document.getElementById('satellite6').parentNode.href='V_Contact_Entreprise.php';
			document.getElementById('satellite6').src='onmouseout.gif';
			break;
	}
}

Normalement, l'image "desactived.gif" devrait être visible sur img 2 et img3 ou img 5 et img 6 mais là, j'ai tout qui est sous onmouseout

**E.Bzz** · 14/06/2007, 16h36

Envoyé par MimiCracra44

Normalement, l'image "desactived.gif" devrait être visible sur img 2 et img3 ou img 5 et img 6 mais là, j'ai tout qui est sous onmouseout

Oui, ça semble normal.
Pour ne pas te poser de questions sur les conflits d'évènements, teste déjà en enlevant tes onmouseover/onmouseout.
Si ça marche, ça sera déjà ça

Viendra ensuite la gestion des conflits

**Deallyra** · 14/06/2007, 16h50

oki... je teste

**Deallyra** · 14/06/2007, 17h04

Bon bah sans les onmouseoevr et onmouse out, j'ai des images fixes...

img1 et img6 on onmouseout.gif
img2,3,4,5 on desactived.gif

mes clics ne donnent rien

**E.Bzz** · 14/06/2007, 17h24

Envoyé par MimiCracra44

mes clics ne donnent rien

En reprenant exactement le script (JS+HTML) que je t'ai donné (en mettant juste des chemins d'images présentes sur mon poste), ça fonctionne.
Avec IE6 et FF2

Tu as bien activé JS ??

**Deallyra** · 14/06/2007, 17h28

activé JS??? oui.

attends...

tu as quel effet toi?

**E.Bzz** · 14/06/2007, 17h37

Envoyé par MimiCracra44

tu as quel effet toi?

Dur d'être précis, vue que j'ai pris les même fichiers pour plusieurs images.
Mais en gros, quand je clique sur img1 ou img4, les 4 autres images changent (différemment suivant si c'est img1 ou img4 cliqué, donc).

Pas toi, apparament ?

**Deallyra** · 14/06/2007, 17h38

beu... non...

**E.Bzz** · 14/06/2007, 17h44

Envoyé par MimiCracra44

beu... non...

Tu testes avec quel nav ?

Colle tout ton code (HTML+JS), des fois qu'un truc saute aux yeux (quand on a passé du temps dessus, y a des trucs qu'on voit plus

)

**Deallyra** · 14/06/2007, 17h48

euh... sous FF...
mais je viens de voir que sous IE je n'ai plus mes images...

bon le 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<table id="paragraphe">
	<tr>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite3').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite3').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite3" src="Image/desactived.gif" alt = "" />
			</a>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite4').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite4').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite4" src="Image/desactived.gif" alt = "" />
			</a>
		</td>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite2').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite2').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite2" src="Image/desactived.gif" alt = "" />
			</a>
        </td>
		<td>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "#"
				onmouseover = "document.getElementById('satellite5').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite5').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite5" src="Image/desactived.gif" alt = "" />
			</a>
        </td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
			<a	href = "index.php?espace=jeune"
				onmouseover = "document.getElementById('satellite1').src = 'Image/sa_jeune.gif'; "
				onmouseout = "document.getElementById('satellite1').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite1" src="Image/onmouseout.gif" alt = "" onclick="ChgImages(this);" />
			</a>
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
            <img src = "Image/Borg_Center2.gif" alt = "" colspan = 2 />
		</td>
		<td>
		</td>
		<td>
		</td>
		<td>
			<a	href = "index.php?espace=entreprise"
				onmouseover = "document.getElementById('satellite6').src = 'Image/sa_entreprise.gif'; "
				onmouseout = "document.getElementById('satellite6').src = 'Image/onmouseout.gif'; " >
				<img id = "satellite6" src="Image/onmouseout.gif" alt = "" onclick="ChgImages(this);" />
			</a>
        </td>
	</tr>
</table>

function ChgImages(objImg)
{
switch (objImg.id)
{
case "satellite1" :
document.getElementById('satellite2').parentNode.href='V_BTS.php';
document.getElementById('satellite2').src='onmouseout.gif';
document.getElementById('satellite3').parentNode.href='V_Contact_Jeune.php';
document.getElementById('satellite3').src='onmouseout.gif';

document.getElementById('satellite5').parentNode.href='#';
document.getElementById('satellite5').src='desactived.gif';
document.getElementById('satellite6').parentNode.href='#';
document.getElementById('satellite6').src='desactived.gif';
break;

case "satellite4" :
document.getElementById('satellite2').parentNode.href='#';
document.getElementById('satellite2').src='desactived.gif';
document.getElementById('satellite3').parentNode.href='#';
document.getElementById('satellite3').src='desactived.gif';

document.getElementById('satellite5').parentNode.href='V_Contrat_Professionalisation.php';
document.getElementById('satellite5').src='onmouseout.gif';
document.getElementById('satellite6').parentNode.href='V_Contact_Entreprise.php';
document.getElementById('satellite6').src='onmouseout.gif';
break;
}
}

**E.Bzz** · 15/06/2007, 09h47

Envoyé par MimiCracra44

mais je viens de voir que sous IE je n'ai plus mes images...

Dès le début, ou après le clic ?
Parce que dans le script, le chemin des images n'est pas bon, on dirait :

Code :

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

document.getElementById('satellite2').src='Image/onmouseout.gif';

Et avec FF ?

A+

**Deallyra** · 15/06/2007, 09h51

Quand je clique sur 1 ou 6, 2,3,4 et 5 deviennent grisées... desactived.gif...
les quatres d'un coup...

mais il suffit que je repasse dessus pour qu'ils prennent l'image normal puis, sur le onmouseout, ils repassent en onmouseout.gif...

J'aimerais que s'ils sont désactivés, on ne puisse pas faire changer leur aspect avec un onmouseout/over...

C'est possible?

Activer/Désactiver un lien

JavaScript

Discussions similaires

Partager

Partager