afficher une image par défaut dans une div

**attarias** · 02/03/2010, 09h16

Bonjour,

Je suis en train d'essayer de faire des vignettes photos qui quand on clique dessus ouvre la photo dans une div au dessus en plus grand.
J'ai trouvé sur le forum un script de Javatwister qui marche très bien!
Cependant une fonctionnalité manque dans mon cas et en tant que débutant en javascript j'aurais besoin d'aide pour le faire.

Pour etre plus précis voici mon code adapté à celui de javatwister:

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
<script type="text/javascript">
 
 
var c=document.getElementById("vignette").getElementsByTagName("img");
var d=document.getElementById("image").getElementsByTagName("div");
 
 
 
for(i in c){
c[i].ind=parseInt(i);
c[i].onclick=function(){
 
for(i=0;i!=d.length;i++)
{
d[i].style.display="none";
}
document.getElementById("image"+[this.ind]).style.display="block";
 
 
}
}
 
</script>

Le souci c'est que la div ou s'affiche l'image en grand est vide au chargement de la page alors que je souhaiterais que l'image de la première vignette apparaisse directement dans la div sans qu'il soit nécessaire de cliquer dessus pour qu'elle y soit (par défaut en quelque sorte)..

Y'a t-il un moyen de faire cela?

Merci d'avance pour votre aide

**E.Bzz** · 02/03/2010, 09h31

Bonjour,
tu donnes toi-même la solution

Il suffit de simuler un clic sur la 1° vignette dès le chargement de la page (onload du <body>).
Quelque chose comme

Code :

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

document.getElementById("vignette").getElementsByTagName("img")[0].click()

devrait le faire.

A+

**attarias** · 02/03/2010, 13h46

merci pour la réponse!
Cependant où je dois mettre ce code ? faut-il créer une autre fonction? que mettre dans <body onload="">?

merci!!

**E.Bzz** · 03/03/2010, 10h04

Tu as déjà le code et l'emplacement ...

Je peux pas taper sur ton clavier à ta place

A+

**attarias** · 04/03/2010, 15h02

si la bonne théorie est :

Code :

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

<body onload="document.getElementById("vignette").getElementsByTagName("img")[0].click()">

en pratique rien ne se passe...
une idée?

merci

**E.Bzz** · 04/03/2010, 15h26

D'une part, comme tu le dis, ce n'est qu'une théorie et il faudrait voir ton code HTML (généré) pour que ça se transforme en véritable conseil, et d'autre part, si tu avais utilisé les balises [CODE] (bouton "#") comme il serait bon d'en prendre l'habitude, l'erreur t'aurait sauté aux yeux (enfin ... aurait dû)

A+

**attarias** · 04/03/2010, 16h20

bien compris pour la balise code autant pour moi
en tant que novice en la matière je trouve pas d'où vient l'erreur...
voici la partie du code html liée au script:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="vignette">
<img src="IMAGE/FLEUR1.jpg" width="100" height="100" style="border:1px #99836d solid;">
<img src="IMAGE/FLEUR2.jpg" width="100" height="100" style="border:1px #99836d solid;">
<img src="IMAGE/FLEUR3.jpg" width="100" height="100" style="border:1px #99836d solid;">
<img src="IMAGE/FLEUR4.jpg" width="100" height="100" style="border:1px #99836d solid;">
</div>
 
<div id="image">
<div id="image0"><a href="IMAGE/FLEUR1.jpg" rel="lightbox"><img src="IMAGE/FLEUR1.jpg" width="425" height="400"></a></div>
<div id="image1"><a href="IMAGE/FLEUR2.jpg" rel="lightbox"><img src="IMAGE/FLEUR2.jpg" width="425" height="400"></a></div>
<div id="image2"><a href="IMAGE/FLEUR3.jpg" rel="lightbox"><img src="IMAGE/FLEUR3.jpg" width="425" height="400"></a></div>
<div id="image3"><a href="IMAGE/FLEUR4.jpg" rel="lightbox"><img src="IMAGE/FLEUR4.jpg" width="425" height="400"></a></div>
</div>

en tout cas merci de tes retours!

**E.Bzz** · 04/03/2010, 16h24

Une erreur dans les quottes : tu mets des doubles-quottes dans une chaîne délimitée par des doubles-quottes.
==>

Code :

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

<body onload="document.getElementById('vignette').getElementsByTagName('img')[0].click()">

A+

**attarias** · 04/03/2010, 16h58

rien ne se passe...il doit y avoir un problème avec mon code....
mais merci pour tes éclaircissements...et tes corrections

**E.Bzz** · 04/03/2010, 17h03

Arf !!
Ne serait-ce pas plutôt

Code :

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

.onclick()

?

A+

**attarias** · 04/03/2010, 19h32

CA MARCHE!!

merci mille fois!

et désolé d'avoir été approximatif en général mais je débute et j'ai encore pas mal de lacunes...

A+

**E.Bzz** · 05/03/2010, 09h12

Envoyé par attarias

et désolé d'avoir été approximatif

Sur le dernier coup, c'est moi qui l'ai été

Bonne suite

Invité · 23/12/2010, 16h01

J'ai exactement le même problème, mais j'ai beau modifier, ça ne marche pas, j'utilise ces balises pour faire un générateur de boutons rollover, et j'aimerais qu'à l'arrivée sur la page, une div (un bouton) soit affiché par défaut : voilà la page avec le générateur : http://web.graphiz.free.fr/Web_Graphiz/Boutons.html

voilà le code qui m'a permis de faire le générateur :

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test affichage DIV</title>
<script type="text/javascript">
	function changeDiv(id)
	{
                	document.getElementById('blanc').style.display = "none";
		document.getElementById('bleu').style.display = "none";
		document.getElementById('rouge').style.display = "none";
                document.getElementById('gris').style.display = "none";
                document.getElementById('jaune').style.display = "none";
                document.getElementById('marron').style.display = "none";
		document.getElementById(id).style.display = "block";
	}
</script>
 
</head>
 
<body onload="document.getElementById('blanc').onclick()">
 
<div style="width:100%">
    <div style="width:100%;">
    	<div id="blanc" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img195.imageshack.us/img195/1253/blanc1.png" border="0"
onMouseOver="this.src='http://img641.imageshack.us/img641/1354/blanc2.png'" onMouseOut="this.src='http://img195.imageshack.us/img195/1253/blanc1.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img195.imageshack.us/img195/1253/blanc1.png" border="0"
onMouseOver="this.src='http://img641.imageshack.us/img641/1354/blanc2.png'" onMouseOut="this.src='http://img195.imageshack.us/img195/1253/blanc1.png'"></TEXTAREA></div>
        <div id="bleu" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img23.imageshack.us/img23/3076/bleu2.png" border="0"
onMouseOver="this.src='http://img23.imageshack.us/img23/3076/bleu2.png'" onMouseOut="this.src='http://img840.imageshack.us/img840/6391/bleu1.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img23.imageshack.us/img23/3076/bleu2.png" border="0"
onMouseOver="this.src='http://img23.imageshack.us/img23/3076/bleu2.png'" onMouseOut="this.src='http://img840.imageshack.us/img840/6391/bleu1.png'"></TEXTAREA></div>
        <div id="rouge" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img834.imageshack.us/img834/4856/rouge1d.png" border="0"
onMouseOver="this.src='http://img8.imageshack.us/img8/3097/rouge2n.png'" onMouseOut="this.src='http://img834.imageshack.us/img834/4856/rouge1d.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img834.imageshack.us/img834/4856/rouge1d.png" border="0"
onMouseOver="this.src='http://img8.imageshack.us/img8/3097/rouge2n.png'" onMouseOut="this.src='http://img834.imageshack.us/img834/4856/rouge1d.png'"></TEXTAREA></div>
<div id="gris" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img704.imageshack.us/img704/6757/gris1.png" border="0"
onMouseOver="this.src='http://img227.imageshack.us/img227/6942/gris2.png'" onMouseOut="this.src='http://img704.imageshack.us/img704/6757/gris1.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img704.imageshack.us/img704/6757/gris1.png" border="0"
onMouseOver="this.src='http://img227.imageshack.us/img227/6942/gris2.png'" onMouseOut="this.src='http://img704.imageshack.us/img704/6757/gris1.png'"></TEXTAREA></div>
<div id="jaune" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img20.imageshack.us/img20/8707/jaune1.png" border="0"
onMouseOver="this.src='http://img828.imageshack.us/img828/8831/jaune2.png'" onMouseOut="this.src='http://img20.imageshack.us/img20/8707/jaune1.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img20.imageshack.us/img20/8707/jaune1.png" border="0"
onMouseOver="this.src='http://img828.imageshack.us/img828/8831/jaune2.png" onMouseOut="this.src='http://img20.imageshack.us/img20/8707/jaune1.png'"></TEXTAREA></div>
<div id="marron" style="display:none;position:absolute;"><br>&nbsp;<img src="http://img192.imageshack.us/img192/1467/orange1s.png" border="0"
onMouseOver="this.src='http://img258.imageshack.us/img258/4573/orange2.png'" onMouseOut="this.src='http://img192.imageshack.us/img192/1467/orange1s.png'"><br><br>
&nbsp;<TEXTAREA id="Data" rows="8" cols="20"><img src="http://img192.imageshack.us/img192/1467/orange1s.png" border="0"
onMouseOver="this.src='http://img258.imageshack.us/img258/4573/orange2.png" onMouseOut="this.src='http://img192.imageshack.us/img192/1467/orange1s.png'"></TEXTAREA></div>
    </div>
 
    <br><div style="width:25%;padding-left:370px">
    	<a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('blanc')"><img src="http://desmond.imageshack.us/Himg406/scaled.php?server=406&filename=agfergf.png&res=gal"></a><br /><br>
        <a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('bleu')"><img src="http://desmond.imageshack.us/Himg33/scaled.php?server=33&filename=image27s.png&res=gal"></a><br /><br>
        <a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('rouge')"><img src="http://desmond.imageshack.us/Himg213/scaled.php?server=213&filename=image31o.png&res=gal"></a><br /><br>
 <a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('gris')"><img src="http://desmond.imageshack.us/Himg529/scaled.php?server=529&filename=image28k.png&res=gal"></a><br /><br>
 <a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('jaune')"><img src="http://desmond.imageshack.us/Himg3/scaled.php?server=3&filename=image29f.png&res=gal"></a><br /><br>
 <a style="text-decoration:underline;cursor:pointer;color:#00F" onclick="changeDiv('marron')"><img src="http://desmond.imageshack.us/Himg6/scaled.php?server=6&filename=image30t.png&res=gal"></a><br />
 
    </div>
 
  </div>
 
</body>
</html>

à présent j'aimerais que la div ('blanc') soit celle par défaut à l'ouverture de la page. J'espère que vous saurez m'aider...

afficher une image par défaut dans une div

JavaScript

Discussions similaires

Partager

Partager