afficher une image dimension réelle

Version imprimable

05/02/2012, 17h39
ideal23

afficher une image dimension réelle

Bonjour
j'ai réalisé un catalogue avec une base de données. La table adéquate possède un champ image. les images sont dans un fichier nommé photos, elles sont de taille normal 400 x 350
j'ai réalisé une requête pour afficher ces images avec un espace réservé de l'image qui fait 160 x 135
j'ai donc une petite image dans la catalogue, je voudrais au clique ou au passage de la souris sur l'image faire apparaître l'image normal, pour plus de vision pour l'internaute.
lien catalogue:
http://galaxyweb.free.fr/catalogue.php?id_menu=13
le code php qui affiche l'image:

Code:

<td><div align="center"><img src="photos/<?php echo $row_cat['photo']; ?>" width="160" height="135" alt="" /></div></td>

j'ai des problèmes pour réaliser la modification souhaitée avec le code php ci-dessus
Merci si vous avez une idée
06/02/2012, 08h14
ideal23

c'est un script qui affiche l'image agrandi au centre de l'écran.

ce script fonctionne , mais le placement du zoom est très différent selon les navigateurs:

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
<SCRIPT LANGUAGE="JavaScript">
// conteneur de l'image zoomée
document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000">');
document.write('<img id="img_zoom_image" src="" style="position:absolute; left:385px; top:400px; z-index:2000;" />');
document.write('</div>');
// affiche l'image au niveau du curseur
function overImage(imgUrl) {
    document.getElementById("div_zoom_image").style.visibility = "visible";
    document.getElementById("img_zoom_image").src = imgUrl;
    document.onmousemove = moveImage;
}
// masque l'image
function outImage() {
    document.getElementById("div_zoom_image").style.visibility = "hidden";
    document.getElementById("img_zoom_image").src = "";
    document.onmousemove = "";
}
// permet d'afficher l'image lorsque la souris bouge dans l'image
function moveImage(event) {
    // position
    var x = event.pageX + 5;
    var y = event.pageY + 5;
    // placement
    document.getElementById("div_zoom_image").style.left = x + "px";
    document.getElementById("div_zoom_image").style.top = y + "px";
}
</SCRIPT>

html:

Code:

1
2
3
<img src="photos/<?php echo $row_cat['photo']; ?>"width="165" height="135"
        onmouseover="overImage('photos/<?php echo $row_cat['photo']; ?>')";
        onmouseout="outImage();" />

si je modifie le script à ce niveau:

Code:

1
2
3
4
/ conteneur de l'image zoomée
document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000">');
document.write('<img id="img_zoom_image" src="" style="position:absolute; left:5px; top:5px; z-index:2000;" />');
document.write('</div>');

c'est ie seulement qui pose problème

06/02/2012, 16h59
Auteur

bonjour,

personnellement je tique quand je vois des document.write() dans un code javascript :?

L'idéal serait de placer en dehors du flux de ta page un div (en float ou en position:absolute) avec une balise img. Ce div serait cahcé dans un premier temps (display:none).
Lorsque tu cliques sur l'image que tu souhaites agrandir, tu affiches ce div (display:block) et tu précises le paramètre src de la balise img. Tu vois ce genre de choses dans de nombreux sites.

Il est fort probable que tu trouveras des exemples dans les tutoriels CSS, Javascript ou dans le forum "Contribuez" ;)
06/02/2012, 19h52
ideal23

je n'ai pas trouvé de script ou tuto pour cet exemple qui me plait, avez-vous une idée?

dans le script le probleme vient de la facon de detecter la position de la souris voit de cette facon

Code:

1
2
3
4
5
6
7
8
9
10
function moveImage(e) {
    // position
 	var dde=(navigator.vendor) ? document.body : document.documentElement;
e =(!e) ? window.event : e;
	var x =e.clientX + dde.scrollLeft;
	var y =e.clientY + dde.scrollTop;
    // placement
    document.getElementById("div_zoom_image").style.left = x + "px";
    document.getElementById("div_zoom_image").style.top = y + "px";
}

07/02/2012, 00h05
ideal23

Merci mekal
çà fonctionne, la preuve:
http://galaxyweb.free.fr/catalogue.php?id_menu=13
une question avec ce script pourrais-on faire apparaît l'image agrandie en cliquant dessus au lieu de passer la souris ?

une question, comment modifier mon code html pour faire apparaître l'image agrandie au clic onclick, au lieu de onmouseover:
Code:

1 2 3 <img src="photos/<?php echo $row_cat['photo']; ?>"width="165" height="135" onmouseover="overImage('photos/<?php echo $row_cat['photo']; ?>')"; onmouseout="outImage();" />
je patauge, Merci

C'est une plaisanterie ?
Une caméra cachée ?
:koi:

Citation:

au clic onclick, au lieu de onmouseover
Citation:
Code:

1 2 3 <img src="photos/<?php echo $row_cat['photo']; ?>"width="165" height="135" onmouseover="overImage('photos/<?php echo $row_cat['photo']; ?>')"; onmouseout="outImage();" />

07/02/2012, 11h55
ideal23

le script ne peut pas fonctionner en modifiant le code html?