Discussion :

[ideal23]

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 :

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

 <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

[ideal23]

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

[ideal23]

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

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

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

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();" />

[ideal23]

si je modifie le script à ce niveau:

Code :

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

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

[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"

[ideal23]

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

[Invité]

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

Code :

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

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

[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 ?

[ideal23]

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

Code :

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

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

[Bovino]

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

au clic onclick, au lieu de onmouseover

Code :

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

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();" />

[ideal23]

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