OnClik sur un OnClik ? [Résolu]

joema · 24/10/2011, 13h41

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, 13h51

Code :

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

document['p']

joema · 24/10/2011, 15h00

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, 15h02

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

joema · 24/10/2011, 15h11

['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, 15h13

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, 15h31

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, 15h34

ben attribues au moins le src ...

Code :

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

document.getElementById('p').src =

joema · 24/10/2011, 15h38

ah ben oui merci

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

SpaceFrog · 24/10/2011, 15h39

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, 15h53

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, 16h01

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, 16h07

Voire

Code :

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

self.location.hash='#ancre'

joema · 24/10/2011, 16h08

ouhhhaaaaaaa super un grand merci.

c'est exactement ca

joema · 25/10/2011, 09h49

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, 17h37

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

24/10/2011, 13h51	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 055 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 055 Points : 45 173 Points : 45 173	Code : Sélectionner tout - Visualiser dans une fenêtre à part document['p'] __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/10/2011, 15h02	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 055 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 055 Points : 45 173 Points : 45 173	non mais déja à la base document['p'] tu le sors d'ou ??? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/10/2011, 15h11	#5
joema Invité de passage Chargé de référencement Inscription : octobre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Chargé de référencement Secteur : Enseignement Informations forums : Inscription : octobre 2011 Messages : 9 Points : 1 Points : 1	['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
	00

24/10/2011, 15h13	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 055 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 055 Points : 45 173 Points : 45 173	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') __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/10/2011, 15h34	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 055 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 055 Points : 45 173 Points : 45 173	ben attribues au moins le src ... Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('p').src = __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/10/2011, 15h38	#9
joema Invité de passage Chargé de référencement Inscription : octobre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Chargé de référencement Secteur : Enseignement Informations forums : Inscription : octobre 2011 Messages : 9 Points : 1 Points : 1	ah ben oui merci aurais tu une idée pour rendre cliquable l'image appelée par le onclik ?
	00

24/10/2011, 15h53	#11
joema Invité de passage Chargé de référencement Inscription : octobre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Chargé de référencement Secteur : Enseignement Informations forums : Inscription : octobre 2011 Messages : 9 Points : 1 Points : 1	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
	00

24/10/2011, 16h07	#13
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Voire Code : Sélectionner tout - Visualiser dans une fenêtre à part self.location.hash='#ancre' __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

24/10/2011, 16h08	#14
joema Invité de passage Chargé de référencement Inscription : octobre 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Chargé de référencement Secteur : Enseignement Informations forums : Inscription : octobre 2011 Messages : 9 Points : 1 Points : 1	ouhhhaaaaaaa super un grand merci. c'est exactement ca
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email