Activer/Désactiver un lien

Version imprimable

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:

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.

14/06/2007, 09h32
E.Bzz

Bonjour,

Citation:

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+
14/06/2007, 09h57
Deallyra
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:

1 2 <img src ="image1" onclick="return image1()"
je sais qu'ensuite je dois faire
Code:

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
14/06/2007, 10h04
E.Bzz

Citation:

Envoyé par MimiCracra44

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

Ah, oui, effectivement je vois le pb :mrgreen:

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+
14/06/2007, 10h08
Deallyra

Merci :oops:

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:

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+

Merci pour le code...
mais...
j'ai testé ça

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

bien sûr, j'ai modifier les ID

14/06/2007, 15h47
E.Bzz

Citation:

Envoyé par MimiCracra44

j'y arrive pas :oops:

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+

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

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

14/06/2007, 16h36
E.Bzz

Citation:

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 :aie:
14/06/2007, 16h50
Deallyra

oki... je teste
14/06/2007, 17h04
Deallyra

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
14/06/2007, 17h24
E.Bzz

Citation:

Envoyé par MimiCracra44

mes clics ne donnent rien

8O

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 ?? :mrgreen:
14/06/2007, 17h28
Deallyra

activé JS??? oui.

attends...

tu as quel effet toi?
14/06/2007, 17h37
E.Bzz

Citation:

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 ?
14/06/2007, 17h38
Deallyra

beu... non...
14/06/2007, 17h44
E.Bzz

Citation:

Envoyé par MimiCracra44

beu... non...

:koi:

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 ;) )

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

bon le 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 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>
Citation:

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;
}
}

15/06/2007, 09h47
E.Bzz

Citation:

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:

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

Et avec FF ?

A+
15/06/2007, 09h51
Deallyra

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?
15/06/2007, 10h27
E.Bzz

Donc il ne se passe pas tout à fait rien ?

Citation:

Envoyé par MimiCracra44

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

Alors il faut ajouter des lignes dans ta fonction.
Pour désactiver onmouseover (pareil pour onmouseout) :

Code:

document.getElementById('satellite3').onmouseover = function {return false;} // à vérifier s'il y a un autre moyen pour désactiver ?

Pour réactiver onmouseover (pareil pour onmouseout) :

Code:

document.getElementById('satellite3').onmouseover = function {document.getElementById('satellite3').src = 'Image/sa_jeune.gif';}

EDIT : à faire pour chaque image concernée, donc ...

A+
15/06/2007, 10h51
Deallyra

J'ai bien un dossier image...
Sous IE je n'avais plus rien si j'enlevais les onmouseout/over...

je teste ta fonction renvoyant false...

merci :)
15/06/2007, 10h53
E.Bzz

Citation:

Envoyé par MimiCracra44

J'ai bien un dossier image...

Oui, tu l'avais oublié dans la fonction ...

Pour finir, voici ce que j'avais utilisé il y a deux ans ^^'

Bon ce sont des tables pour une mise en page mais bon >.>

il s'agit de la page V_Espace.php

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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<table id="paragraphe">
	<tr>
		<td>
		</td>
		<td>
			<?php
				if(strcmp($_GET['espace'],'jeune') == 0)
				{
			?>
				<a href = "V_Contact_Jeune.php">
					<img id = "satellite3" src="Image/sa_inscription.gif" alt = "Comment s'inscrire ?" />
				</a>
			<?php
				}
				if(strcmp($_GET['espace'],'entreprise') == 0)
				{
					echo'
						<img src="Image/desactived.gif" alt = "" />'
					;
				}
				;
				if(strcmp($_GET['espace'],'formateur') == 0)
				{
			?>
				<a href = "V_Consulter_Offre.php">
					<img id = "satellite3" src="Image/sa_consulter_offre.gif" alt = "Consulter nos offres ..." />
				</a>
			<?php
				}
				;				
			?>
		</td>
		<td>
		</td>
		<td>
			<?php
				if(strcmp($_GET['espace'],'jeune') == 0)
				{
			?>
				<a href = "V_Annonce_Consulter.php">
					<img id = "satellite4" src="Image/sa_consulter_annonce.gif" alt = "Consulter nos annonces ..." />
				</a>
			<?php
				}
				if(strcmp($_GET['espace'],'entreprise') == 0)
				{
			?>
				<a href = "V_Contact_Entreprise.php">
					<img id = "satellite4" src="Image/sa_contact.gif" alt = "Nous contacter ..." />
				</a>
			<?php
				}
				if(strcmp($_GET['espace'],'formateur') == 0)
				{
			?>
				<a href = "V_Deposer_CV.php">
					<img id = "satellite4" src="Image/sa_CV.gif" alt = "Déposer votre CV ..." />
				</a>
			<?php
				}
			?>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
			<?php
				if(strcmp($_GET['espace'],'jeune') == 0)
				{
			?>
						<a href = "V_BTS.php">
							<img id = "satellite2" src="Image/sa_BTS.gif" alt = "Nos BTS ..." />
						</a>
			<?php
				}
				else
				{
					echo'
						<img src="Image/desactived.gif" alt = "" />'
					;
				}
				;
			?>
        </td>
		<td>
		</td>
		<td>
            <img src = "Image/Borg_Center2.gif" alt = "" />
		</td>
		<td>
		</td>
		<td>
			<?php
				if((strcmp($_GET['espace'],'jeune') == 0) or (strcmp($_GET['espace'],'formateur') == 0))
				{
					echo'
						<img src="Image/desactived.gif" alt = "" />'
					;
				}
				if(strcmp($_GET['espace'],'entreprise') == 0)
				{
			?>
				<a href = "V_Contrat_Professionalisation.php">
					<img id = "satellite5" src = "Image/sa_contrat_professionalisation.gif" alt = "Le Contrat de professionalisation" />
				</a>
			<?php
				}
				;
			?>
        </td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
			<a href = "V_Espace.php?espace=jeune">
				<img id = "satellite1" src="Image/onmouseout_jeune.gif" alt = "Espace Jeune" 
					onmouseover = "document.getElementById('satellite1').src='Image/sa_jeune.gif';"
					onmouseout = "document.getElementById('satellite1').src='Image/onmouseout_jeune.gif';" />
			</a>
		</td>
		<td>
			<a href = "V_Espace.php?espace=formateur">
				<img id = "satellite7" src="Image/onmouseout_formateur.gif" alt = "Espace Formateur" 
					onmouseover="document.getElementById('satellite7').src='Image/sa_formateur.gif';"
					onmouseout="document.getElementById('satellite7').src='Image/onmouseout_formateur.gif';" />
			</a>
		</td>
		<td>
			<a href = "V_Espace.php?espace=entreprise">
				<img id = "satellite6" src="Image/onmouseout_entreprise.gif" alt = "Espace Entreprise"
					onmouseover = "document.getElementById('satellite6').src='Image/sa_entreprise.gif';"
					onmouseout = "document.getElementById('satellite6').src='Image/onmouseout_entreprise.gif';" />
			</a>
        </td>
		<td>
		</td>
	</tr>
</table>