Forum d'entraide PHPFrance

Bonjour,
je voudrais au passage de la souris que l'image s'affiche en agrandi. Jusque la tout va bien.
Elle se modifie normalement mais revient à chaque fois à l'image de départ.
Exemple 1 :
http://www.larosedelorient.com/photo.php?id=151
ou l'affichage de l'agrandissement cela reste bloqué sur la dernière image du code html sans pouvoir retourné en arrière.
Exemple 2 :
http://www.larosedelorient.com/photo1.php?id=151
je voudrais que la dernière image sur laquelle on passe la souris reste affiché et pas seulement la dernière de la page.
PS. Je ne sait même pas comment effectué une recherche toutes mes recherches n'ont pas aboutis.
J'ai vue que cela était possible sur un autre site mais je ne me souvient plus lequel.
Merci.

Sur le lien mis, il n'y a aucun agrandissement javascript ...

L'agrandissement s'affiche sur l'image du haut.

Voici le code utilisé et épurer de tous ce qui est inutile.

<style type="text/css"> 
img{border:0;border-collapse:collapse;}
img.petite{width:55;height:74;border:1px solid  #990000;}
img.agrandi{position:absolute;visibility:hidden;top:0;left:0;width:300;height:400;}
</style>
<script type="text/JavaScript"> 
<!--
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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<img src="photo/vetement/robe/robe-bleue.jpg" alt="" style="width:300;height:400;">
<br>
<!--exemple 1//-->
<img src="photo/vetement/robe/robe-bleue.jpg" alt=""  class="petite" id="image" onmouseover="MM_showHideLayers('image1','','show')" onmouseout="MM_showHideLayers('image1','','hide')">
<img src="photo/vetement/robe/robe-bleue.jpg" alt="" class="agrandi" id="image1">
<img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt=""  class="petite" id="image2" onmouseover="MM_showHideLayers('image3','','show')" onmouseout="MM_showHideLayers('image3','','hide')">
<img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt="" class="agrandi" id="image3">

<!--exemple 2//-->
<img src="photo/vetement/robe/robe-bleue.jpg" alt="" style="width:300;height:400;">
<img src="photo/vetement/robe/robe-bleue.jpg" alt=""  class="petite" id="image" onmouseover="MM_showHideLayers('image1','','show')">
<img src="photo/vetement/robe/robe-bleue.jpg" alt="" class="agrandi" id="image1">
<img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt=""  class="petite" id="image2" onmouseover="MM_showHideLayers('image3','','show')">
<img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt="" class="agrandi" id="image3">

On peut imaginer mettre l'image dans un div en overflow:hidden de la meme taille que l'image d'origine, de preloader l'image en JavaScript, et lors du survol de la souris, mettre l'image dans le div (ou simplement remplacer l'url de l'image d'origine), et revenir au départ à la sortie de la souris.

Voilà. A+

justement je ne veux pas revenir au départ a la sortie de la souris. cela veut dire que je me retrouve dans l'exemple 1 non?

Je ne peux pas t'aider, je ne vois qu'un lot d'images sur le lien que tu nous as passé, sans aucun effet javascript. Si tu veux pas qu'elle revienne à sa position d'origine, elle ne reviendra pas, où est le problème ?

Ton problème ne se situe pas plutot sur larosedelorient ? Il faudrait que lorsque l'on se déplace sur l'image zoomée, elle ne parte pas. C'est ça ?

c'est cela mais vue que je travaille dans une frame le reste du script est sans incidence.
a présent et ce grâce à tes lumières j'ai réussi à régler mon problème.
dont voici le code.
vous reste à l'adapter pour obtenir ce que vous voulez en faire.

<html>
<head>
<style type="text/css"> 
*{margin:0;padding:0;*{margin:0;padding:0;font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;}
p{font-size:12px;margin:10px 0;}
p.horizon{float:left;margin:0 5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55;height:74;border:1px solid  #990000;}
img.agrandi{width:300;height:400;}
</style>
<script language="Javascript"> 
<!--
if (document.images) {
     grande_image = new Image
     photo1 = new Image
     photo2 = new Image
     photo3 = new Image
 
     grande_image.src = 'photo/vetement/robe/robe-bleue.jpg'
     photo1.src = 'photo/vetement/robe/robe-bleue-zoom-haut.jpg'
     photo2.src = 'photo/vetement/robe/robe-bleue-profile.jpg'
     photo3.src = 'photo/vetement/robe/robe-bleue-dos.jpg'
 }
//-->
</script>
</head><body>

 
 
<img name="grande_photo" src="photo/vetement/robe/robe-bleue.jpg" alt="" class="agrandi">
 
<p>Survoler la vignette pour l'agrandir.</p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue.jpg" alt=""  class="petite" id="image" onmouseover="document.grande_photo.src=grande_image.src"></p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt=""  class="petite" id="image2" onmouseover="document.grande_photo.src=photo1.src"></p>
</body></html>

Il marche ton code ? Je vois plein d'erreurs rien qu'en le lisant.

tu m'as mis le doutes il fonctionne bien il est même déja en ligne sur le site la rose de l'orient.
la page ou ce code est en place. le contenu de la frame se situe ici.
http://www.larosedelorient.com/photo.php?id=151
Sa va très vite avec moi encore tout chaud que déja servi...
et en plus il respect la norme w3c.
il manque quelque petite chose pour la validation w3c.
je les ai ajouté sur ma page.

Ca marche pas du tout. En plus, le <!-- directement dans le code JavaScript devrait lancer une erreur, de plus Image est une classe, donc sa syntaxe est new Image(), mais là ... pourquoi pas. En plus "document.grande_photo" fait à priori référence à un objet non existant. Il faudrait faire un getElementById() sur un élément possédant un Id (Or, tu utilises des "name", pas des "id"). Enfin, le séparateur d'instructions est le point virgule, même si JavaScript, je crois, tolère son absence dans la limite d'une instruction par ligne.

Bref, chez moi, il y a un tas d'images, mais aucune réaction.

sa ne fonctionne que sous ie
sous le renard de feu, safari et chrome que dalle meme le redimentionnement en css ne fonctionne pas.
je vais corriger les point que tu vien de me donner.
ps je n'avais verifier que sous ie.
EDIT:
voila sa fonctionne sous ie, le renard de feu,safarie et chrome le css a été également corriger.
le code ci-dessous.
merci pour toutes ses piste qui m'ont permis de corrigé les bugs.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
*{margin:0;padding:0;font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;}
p{font-size:12px;margin:10px 0;}
p.horizon{float:left;margin:0 5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55px;height:74px;border:1px solid  #990000;}
img.agrandi{width:300px;height:400px;}
</style>
<script type="text/Javascript"> 
if (document.images) {
    grande_image = new Image();
    photo1 = new Image();
    photo2 = new Image();
    photo3 = new Image();
 
    grande_image.src = 'photo/vetement/robe/robe-bleue.jpg';
    photo1.src = 'photo/vetement/robe/robe-bleue-zoom-haut.jpg';
    photo2.src = 'photo/vetement/robe/robe-bleue-profile.jpg';
    photo3.src = 'photo/vetement/robe/robe-bleue-dos.jpg';
}
</script>
</head><body>
 
 
<img name="grande_photo" src="photo/vetement/robe/robe-bleue.jpg" alt="" title="robe longue bleue" class="agrandi">
<p>Survoler la vignette pour l'agrandir.</p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue.jpg" alt="" class="petite" onmouseover="document.grande_photo.src=grande_image.src;"></p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue-zoom-haut.jpg" alt="" class="petite" onmouseover="document.grande_photo.src=photo1.src;"></p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue-profile.jpg" alt="" class="petite" onmouseover="document.grande_photo.src=photo2.src;"></p>
<p class="horizon"><img src="photo/vetement/robe/robe-bleue-dos.jpg" alt="" class="petite" onmouseover="document.grande_photo.src=photo3.src;"></p>
</body></html>