problème image réactive

filtep · 13/02/2011, 20h18

Bonsoir à tous,

je cherche à ouvrir une grande image en clikant sur une vignette, et pouvoir refermer cette grande image en clikant sur une zone réactive "close"

voici mon code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>ess</title>
 
<style>
.pres{
position:fixed;
margin-left:350px;
margin-top:100px;
}
</style>
</head>
 
<body>
<!-- définition de l'image grand modèle, invisible au départ -->
<img name="presenta" class="pres" style="border: 0px solid ; width: 789px; height: 553px;" 
alt="" src="" usemap="#ferme">
<!-- définition de la zone réactive-->
<map name="ferme"><area shape="rect" coords="702,19,769,38" href="" onclick="document.presenta.src='';"></map>
<!-- définition de la vignette qui fera apparaitre en cas de click la grande image-->
<a href=""><img src="Photos/bijoux_pm.jpg" onclick="document.presenta.src='Photos/coeuretpastillePMgrand.png';"></a>
</body>
</html>

Malheureusement ca ne marche pas, en effet, la grande image n'apparait que quelques dixièmes de secondes lors du relâchement du click gauche...

voici le lien vers la page test
http://www.latelier-de-julie.com/ess.html

Si l'un d'entre vous peux m'aider ca serait sympa.

Merci d'avance
Philippe

Meloooo · 14/02/2011, 09h30

Bonjour,
Essayes avec window open :

Code :

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

1
2
 
onClick="window.open('Photos/coeuretpastillePMgrand.png','image','height=800,width=600')

Vil'Coyote · 14/02/2011, 10h46

Citation:

Envoyé par Meloooo

Bonjour,
Essayes avec window open :

Code :

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

1
2
 
onClick="window.open('Photos/coeuretpastillePMgrand.png','image','height=800,width=600')

si on fait ça, cela ouvre une nouvelle fenêtre ou onglet je ne penese pas que cela soit le but recherché.

tu peux utiliser un div avec un z-index ou regarder vers jquery/lightbox.

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