ouvrir une image en plus grand au clic de souris

**kriss2b** · 10/08/2008, 14h29

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

**Sub0** · 10/08/2008, 22h45

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 :

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

1
2
.hoverbox a:active .preview
{

**Bovino** · 10/08/2008, 23h36

Avec une fonction javascript du style :

Code :

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

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

et le code js :

Code :

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

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

**kriss2b** · 15/08/2008, 14h40

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 :

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

**Sub0** · 15/08/2008, 16h40

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