Conserver la dernière image.

par **hakazizi** » 19 déc. 2010, 12:50

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>

par **devlop78** » 19 déc. 2010, 02:47

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.

par **hakazizi** » 18 déc. 2010, 21:14

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.

par **devlop78** » 18 déc. 2010, 20:51

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

par **hakazizi** » 18 déc. 2010, 19:52

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>

par **devlop78** » 18 déc. 2010, 15:03

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 ?

par **devlop78** » 18 déc. 2010, 15:01

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 ?

par **hakazizi** » 18 déc. 2010, 14:57

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?

par **devlop78** » 18 déc. 2010, 14:32

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+

par **hakazizi** » 18 déc. 2010, 14:15

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

par **devlop78** » 18 déc. 2010, 13:54

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

par **hakazizi** » 18 déc. 2010, 12:33

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.

Conserver la dernière image.

Répondre

Étendre la vue Revue du sujet : Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Re: Conserver la dernière image.

Conserver la dernière image.