OnClik sur un OnClik ?

Version imprimable

bonjour,
je débute en html/javascript.

ce que j'ai fait pour l'instant, c'est qu'en cliquant sur une image il m'en affiche deux autres, mais ce que je voudrais faire maintenant c'est de rendre une de ces deux cliquable aussi. du coup je ne sais pas ou placer mon 2eme "onClick"

en gros ce que je voudrais faire, c'est qu'en cliquant sur "fac-p.jpg" je pointe sur un ancre de la meme page

merci pour votre aide :oops:

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
<html>
<head>
<title>fact_v</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript"> 
 
var facp = new Image();
var facg = new Image();
 
 
facp.src = "fac-p.jpg";
facg.src = "fac-g.jpg";
 
function doB(pimage, gimage) {
document['p'].src=pimage;
document['g'].src=gimage;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="1024" height="800" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="379" height="181" rowspan="15">&nbsp;</td>
		<td>
			<img src="images/fact_v_g_02.jpg" width="191" height="27" alt=""></td>
		<td width="454" height="181" rowspan="15">
 
            <IMG name="p" SRC="images/im_vide.jpg" WIDTH="148" HEIGHT="176"/>
            </td>
	</tr>
	<tr>
		<td>
<img src="images/fact_v_g_04.jpg" width="191" height="15"  
onmouseover="this.src='images/fact_v_neg_04.jpg'"
onMouseOut="this.src='images/fact_v_g_04.jpg'"
                onClick="doB('images/fac-p.jpg','images/fac-g.jpg')"></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_05.jpg" name="test" width="191" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
<img src="images/fact_v_g_06.jpg" name="g2" width="191" height="15"
onmouseover="this.src='images/fact_v_neg_06.jpg'"
onMouseOut="this.src='images/fact_v_g_06.jpg'"
                onClick="change('images/fact_2.jpg')"></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_07.jpg" width="191" height="13" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_08.jpg" width="191" height="15" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_09.jpg" width="191" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_10.jpg" width="191" height="15" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_11.jpg" width="191" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_12.jpg" width="191" height="15" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_13.jpg" width="191" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_14.jpg" width="191" height="15" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_15.jpg" width="191" height="3" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_16.jpg" width="191" height="26" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fact_v_g_17.jpg" width="191" height="6" alt=""></td>
	</tr>
	<tr>
		<td width="1024" height="14" colspan="3">&nbsp;</td>
	</tr>
	<tr>
		<td 
 width="1024" height="605" colspan="3">
			<img name="g" src="images/g.jpg"></td>
	</tr>
</table>
</body>
</html>

24/10/2011, 13h51
SpaceFrog

Code:

document['p']

8O

j'ai modifié le script
Code:

1 2 3 4 function doB(pimage, gimage, url) { document['p'].src=pimage; document['g'].src=gimage; window.location = url;
puis
Code:

1 2 3 4 <img src="images/fact_v_g_04.jpg" width="191" height="15" onmouseover="this.src='images/fact_v_neg_04.jpg'" onMouseOut="this.src='images/fact_v_g_04.jpg'" href="#" onClick="doB('images/fac-p.jpg','images/fac-g.jpg','#rge')">
mais c'est sur la premiere image que ca me le fait et non sur la deuxieme, du coup ca m'affiche les deux images en meme temps que l'écran passe sur l'ancre

24/10/2011, 15h02
SpaceFrog

non mais déja à la base document['p'] tu le sors d'ou ???
24/10/2011, 15h11
joema

['P']
c'est pas pour pointer vers la bonne image ?
j'aurai du l'appeler autrement ?

Code:

<IMG name="p" SRC="images/im_vide.jpg" WIDTH="148" HEIGHT="176"/>

Code:

<img name="g" id="rge" src="images/g.jpg">

parceque ca (me) semble fonctionner bien cette partie
24/10/2011, 15h13
SpaceFrog

Code:

id="p"

Code:

document.getElementById('p')
24/10/2011, 15h31
joema
Code:

1 2 3 function doB(pimage, gimage ) { document.getElementById('p')=pimage; document.getElementById('g')=gimage;
Code:

<IMG id="p" SRC="images/im_vide.jpg" WIDTH="148" HEIGHT="176" border="0" />

c'est comme ca que ca s'écrit ?
là j'ai plus aucune image sur le onclik
24/10/2011, 15h34
SpaceFrog

ben attribues au moins le src ...

Code:

document.getElementById('p').src =
24/10/2011, 15h38
joema

ah ben oui merci :D

aurais tu une idée pour rendre cliquable l'image appelée par le onclik ?

ton image est toujours cliquable !
seulement tu attribues toujours le même src ...

pour preuve
Code:

1 2 3 4 function doB(pimage, gimage ) { alert('je change le src') document.getElementById('p').src=pimage; document.getElementById('g').src=gimage;}

24/10/2011, 15h53
joema

oui mon image est toujours cliquable avec la meme image, ca c'est bien :p

mais c'est la deuxième que je souhaite rendre cliquable une fois qu'on a cliqué sur la première pour pouvoir pointer vers une ancre

c'est fac-p.jpg qui doit pointer vers une ancre mais vu que cette image n'est défini que par la fonction
je ne sais pas comment créer un lien sur une image appelée par une fonction

je dois pas être super clair mais je sais pas comment l'expliquer mieux

pour résumer
si je clique sur image1 il affiche image2 et image3
si je clique sur image2 je pointe sur mon ancre.

si je clique pas sur image1 je peux pas cliquer sur image2 puisqu'elle n'apparait pas

Tu veux donc modifier le onclick sur la balise image qui aura changé de src ?
Code:

1 2 3 4 5 function doB(pimage, gimage ) { alert('je change le src') document.getElementById('p').src=pimage; document.getElementById('p').onclick=function(){self.location.href='#ancre'} .../...

24/10/2011, 16h07
Bovino

Voire

Code:

self.location.hash='#ancre'

;)
24/10/2011, 16h08
joema

ouhhhaaaaaaa super un grand merci.

c'est exactement ca

:ccool:

excusez moi c'est encore moi, mais serait il possible de ne pas affecter l'ancre
à

Code:

document.getElementById('p')

en sachant qu'en fonction de l'image affiché le lien devrait etre différent ?

Code:

1
2
3
4
<img src="images/fact_v_g_04.jpg" width="191" height="15"  
onmouseover="this.src='images/fact_v_neg_04.jpg'"
onMouseOut="this.src='images/fact_v_g_04.jpg'"
                onClick="doB('images/fac-p.jpg','images/fac-g.jpg')"> ...

fac-p.jpg pointe vers un lien

Code:

1
2
3
4
<img src="images/fact_v_g_06.jpg" id="" width="191" height="15"
onmouseover="this.src='images/fact_v_neg_06.jpg'"
onMouseOut="this.src='images/fact_v_g_06.jpg'"
                onClick="doB('images/devis-p.jpg','images/devis-g.jpg')">

pointe vers un autre :oops:

rappel des fonctions:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language="JavaScript"> 
 
var facp = new Image();
var facg = new Image();
var devp = new Image();
var devg = new Image();
 
facp.src = "fac-p.jpg";
facg.src = "fac-g.jpg";
devp.src = "dev-p.jpg";
devg.src = "dev-g.jpg";
 
function doB(pimage, gimage ) {
document.getElementById('p').src=pimage;
document.getElementById('p').onclick=function(){self.location.hash='#fenetre_principale'};
document.getElementById('g').src=gimage;
}
</script>

j'ai rajouté l'argument en vert :
Code:

1 2 3 4 5 6 7 8 9 10 function doB(pimage, gimage, refac) document.getElementById('p').src=pimage; document.getElementById('g').src=gimage; window.location=refac .../... <img src="images/fact_v_g_04.jpg" width="191" height="15" onmouseover="this.src='images/fact_v_neg_04.jpg'" onMouseOut="this.src='images/fact_v_g_04.jpg'" onClick="doB('images/fac-p.jpg','images/im_vide.jpg','#rge')";/>
mais c'est fact_v_g_04.jpg pas fac-p.jpg qui est cliquable.

du coup il affiche fac-p.jpg en meme temps qu'il me positionne sur l'ancre