Zoom Image se déplacant

**Francso** · 22/07/2013, 20h45

Bonjour à tous,

J'utilise un script pour zoomer sur une image miniature qui fonctionne très bien mais il y a quelque chose qui m'échappe, voici donc le script que j'utilise :

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
<script type="text/javascript">
 
// conteneur de l'image zoomée
document.write('<div id="div_zoom_image" style="text-align:center;padding:15px;border:1px solid #eee;background :url(img/transparence.png);position:absolute; visibility:hidden; left:45%;top:250px; z-index:1000;">');
document.write('<img id="img_zoom_image" src="" width="450" />');
document.write('</div>');
 
 
// affiche l'image
function overImage(imgUrl) {
    document.getElementById("div_zoom_image").style.visibility = "visible";
    document.getElementById("img_zoom_image").src = imgUrl;
}
 
// masque l'image
function outImage() {
    document.getElementById("div_zoom_image").style.visibility = "hidden";
    document.getElementById("img_zoom_image").src = "";
}
 </script>

et l'utilisation dans la page :

Code html :

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

<img src="./images/maphoto_miniature.jpg"  height="100" onMouseOver="overImage('images/maphoto_grande.jpg')";  onmouseout="outImage();" />

Pour un affichage classique ça fonctionne au poil par contre j'ai plusieurs photos les unes en dessous des autres et quand je descend, le zoom ne se déplace pas (il se fait toujours à 250px du haut (normal c'est défini ainsi)), il faut à mon avis que je récupère la position de ma miniature et que je donne l'info via un backgroundPosition mais je n'y arrive pas

De plus je voudrai limiter la taille de la photo agrandie à 450 px, donc aucun souci pour définir la taille à 450 px pour toutes les photos (le width="450" fait ça très bien)

mais si la photo est de taille plus petite elle est agrandie également, donc comment vérifier ça ?

Merci d'avance si vous pouvez m'éclairer sur ces deux points.

**Francso** · 23/07/2013, 18h17

Pas d'idée ??

Ce que j'ai actuellement :

Ce que j'aimerai avoir au final :

Et le code plus complet :

Code html :

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
<head>
<script type="text/javascript">
 
function overImage(imgUrl) {
 
    document.getElementById("div_zoom_image").style.visibility = "visible";
    document.getElementById("img_zoom_image").src = imgUrl;
}
  
 
function outImage() {
    document.getElementById("div_zoom_image").style.visibility = "hidden";
    document.getElementById("img_zoom_image").src = "";
}
</script>
</head>
 
<body>
<?PHP
while($row = mysql_fetch_array($result)) {
   $Photo=($row['Photo']);
?>
<table><td><tr>
<div id="occas_contour">
 
<div id="div_zoom_image"><img id="img_zoom_image" src="" width="450"></div>
 
<div id="occas_photo"><img src="images/<?php echo $Photo; ?>" height="100" onMouseOver="overImage('images/<?php echo $Photo; ?>') "; onmouseout="outImage();" /><br></div>
</div></tr></td></table>
}

Et le CSS :

Code CSS :

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
#occas_contour {
      width:750px;
      height:250px;
      margin: 0 2px 0 92px;
      background-image: url(../img/fond_occas.png);
      border:none;
      font-family: Century Gothic;
      font-size: 10pt;
      color: #FFFFFF;
      position:relative;
 
}
 
#occas_photo {
    padding: 15px 0px 15px 0px;
    float:left;
    height:130px;
    width:200px;
    text-align:center;
    vertical-align: middle;
 
}
#div_zoom_image {
    text-align:center;
    padding:15px;
    border:1px solid #eee;
    background :url(../img/transparence.png);
    position:absolute;
    visibility:hidden;
    left:300px;
    top:250px;
    z-index:1000;
}

Zoom Image se déplacant

JavaScript

Discussions similaires

Partager

Partager