ouvrir une image en plus grand au clic de souris

tout est dans le titre
je souhaite au clic sûr l'image que celle ci s'ouvre par dessus en plus grand
Merci de vôtre aide

Exemple

Source

Utilise la propriété "a:active" plutôt que "a:hover" si tu veux que l'image s'affiche au clic.
Dans hoverbox.css :
Code:

1 2 .hoverbox a:active .preview {

Avec une fonction javascript du style :

Code:

<img alt="txt_alt" src="chemin_de_ton_image" onclick="swapImg(this)" width="largeur" height="hateur" />

et le code js :
Code:

1 2 3 4 5 6 7 function swapImg(elt){ //Partie de script où tu vérifies si l'image est déjà agrandie ou pas //Mais les indications que tu donnes sont trop succinctes pour te donner une piste //Puis tu détermines la nouvelle taille de l'image elt.width=newWidth; elt.height=newHeight; }

merci de m en dire un peu plus svp

Pourriez vous me dire a quel endroit dois je inserer le code svp j ai mis en rouge les images que je souhaite faire apparaitre en plus gros au passage souris

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>



<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--


function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="../css/Nomade12.css" rel="stylesheet" type="text/css" />
<link href="../css/dromadaire.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('../images-retail/accueil_fermer.jpg','../images-retail/dromadaire_fermer.jpg','../images-retail/marc_fermer.jpg','../images-retail/4X4_fermer.jpg','../images-retail/spiritualite_fermer.jpg','../images-retail/circ_fermer.jpg','../images-retail/tarifs_fermer.jpg','../images-retail/ptit_fermer.jpg','../images-retail/cont_fermer.jpg')">
<table width="990" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2"><img src="../images-retail/file_chameaux-recoup.jpg" width="990" height="150" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="../images-retail/Haut_de_Page_03.jpg" width="990" height="77" border="0" usemap="#Map" /></td>
  </tr>
  <tr>
    <td colspan="2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../images-retail/accueil_fermer.jpg',1)"><img src="../images-retail/accueil_ouvert.jpg" name="Image3" width="110" height="39" border="0" id="Image3" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../images-retail/dromadaire_fermer.jpg',1)"><img src="../images-retail/dromadaire_ouvert.jpg" name="Image4" width="110" height="39" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images-retail/marc_fermer.jpg',1)"><img src="../images-retail/marches_ouvert.jpg" name="Image5" width="110" height="39" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images-retail/4X4_fermer.jpg',1)"><img src="../images-retail/4X4_ouvert.jpg" name="Image6" width="110" height="39" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../images-retail/spiritualite_fermer.jpg',1)"><img src="../images-retail/spiritualite_ouvert.jpg" name="Image7" width="110" height="39" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images-retail/circ_fermer.jpg',1)"><img src="../images-retail/circuits_ouvert.jpg" name="Image8" width="110" height="39" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../images-retail/tarifs_fermer.jpg',1)"><img src="../images-retail/tarifs_ouvert.jpg" name="Image9" width="110" height="39" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../images-retail/ptit_fermer.jpg',1)"><img src="../images-retail/ptits-truc_ouvert.jpg" name="Image10" width="110" height="39" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../images-retail/cont_fermer.jpg',1)"><img src="../images-retail/Contact_ouvert.jpg" name="Image11" width="110" height="39" border="0" id="Image11" /></a></td>
  </tr>
  <tr>
    <td width="217"><img src="../images-retail/image_dromadaire_retail.jpg" name="dromacoucher" width="217" height="131" id="dromacoucher" /></td>
    <td valign="top" width="773" height="393" rowspan="3">uuuuuuuuuuuuuuuuuuu    </td>
  </tr>
  <tr>
    <td><img src="../images-retail/chamelier_retail.jpg" width="217" height="131" /></td>
  </tr>
  <tr>
    <td><img src="../images-retail/retail_habib_et-_camel.jpg" width="217" height="131" /></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>


<map name="Map" id="Map"><area shape="rect" coords="852,16,979,54" href="../album_photo_dynamique/index.html" />
</map></body>
</html>

En fait, je me demande quelle méthode tu veux utiliser : Soit tu as des miniatures réalisées avec PHP à partir des images originales et dans ce cas, tu as 2 images (la miniature + l'image originale), soit tu n'as que l'image originale que tu l'affiches en plus petite en modifiant uniquement les dimensions d'affichage et dans ce cas, la qualité des miniatures est moins bonne mais c'est plus simple à mettre en oeuvre (c'est la méthode proposée par Bovino).

une autre discussion qui peut t'inspirer...

http://www.developpez.net/forums/d59...etelementbyid/