OnClik sur un OnClik ?

**joema** · 24/10/2011, 14h41

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

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

**SpaceFrog** · 24/10/2011, 14h51

Code :

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

document['p']

**joema** · 24/10/2011, 16h00

j'ai modifié le script

Code :

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

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

puis

Code :

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

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

**SpaceFrog** · 24/10/2011, 16h02

non mais déja à la base document['p'] tu le sors d'ou ???

**joema** · 24/10/2011, 16h11

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

Code :

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

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

Code :

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

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

parceque ca (me) semble fonctionner bien cette partie

**SpaceFrog** · 24/10/2011, 16h13

Code :

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

id="p"

Code :

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

document.getElementById('p')

**joema** · 24/10/2011, 16h31

Code :

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

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

Code :

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

<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

**SpaceFrog** · 24/10/2011, 16h34

ben attribues au moins le src ...

Code :

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

document.getElementById('p').src =

**joema** · 24/10/2011, 16h38

ah ben oui merci

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

**SpaceFrog** · 24/10/2011, 16h39

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

pour preuve

Code :

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

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

**joema** · 24/10/2011, 16h53

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

**SpaceFrog** · 24/10/2011, 17h01

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

Code :

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

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'}
.../...

**Bovino** · 24/10/2011, 17h07

Voire

Code :

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

self.location.hash='#ancre'

**joema** · 24/10/2011, 17h08

ouhhhaaaaaaa super un grand merci.

c'est exactement ca

**joema** · 25/10/2011, 10h49

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

Code :

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

document.getElementById('p')

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

Code :

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

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 :

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

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

rappel des fonctions:

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

**joema** · 25/10/2011, 18h37

j'ai rajouté l'argument en vert :

Code :

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

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

OnClik sur un OnClik ?

JavaScript

Discussions similaires

Partager

Partager