Agrandir une image en javascript

08 févr. 2007, 13:54

Bonjour,

j'aimerais savoir comment faire pour agrandir une image au passage de la souris en javascript sans modifier le reste de la page.
Je ne veux pas utiliser du CSS.
Je pense qu'il faudrait que j'utilise des calques mais je ne sais pas du tout comment m'y prendre.

08 févr. 2007, 15:08

Salut,

-> la méthode facile et efficace ((X)HTML, CSS) :
Tu crées un lien (x)html qui pointe vers une page identique avec la photo que tu auras agrandis via ton éditeur graphique.

Les deux méthodes suivantes complètent celle ci-dessus :

-> la meilleure méthode (mais la plus complexe / (X)HTML, CSS, JS, DOM, Ajax) :
Tu annihiles la transmission de l'url au clic sur le lien et tu insères ta grande image dans la page à la place.

-> la bofbof méthode (pas super accessible / (X)HTML, CSS, JS, DOM) :
Tu fais un préchargement d'image, tu annihiles la transmission de l'url au clic sur le lien et tu insères l'image dans la page sur le clic.
(PS: S'il y a cinquante image, ça mettera une heure à charger sur une connection petit débit)

Tu vas me dire : "oui mais moi, je veux pas mettre une nouvelle image, je veux l'agrandir !!!

"
Je te réponds : "oui mais -> bonne pratique

"

08 févr. 2007, 15:17

Je ne veux pas utiliser du CSS.

C'est dommage de persister à s'éclairer à la bougie quand on a l'electricité

Il y avait juste deux propriétés à utiliser, un simple rapport à calculer, et le tour aurait été joué....

document.getElementById('monImage').style.width = '... px';
document.getElementById('monImage').style.height = '... px';

08 févr. 2007, 15:47

ok...

C'est dommage de générer de l'électricité en pédalant quand on a le nucléaire...

08 févr. 2007, 18:35

Euh..... ma remarque était à son intention, pas à tes suggestions hein

C'est lui qui pédale pour allumer sa bougie plutôt que de s'éclairer au css

(comment ça, ça veut rien dire ce que je raconte ?

)

08 févr. 2007, 19:55

oui, j'avais bien vu mais il y a eu double méprise...

J'ai cru que tu avais cliqué sur le lien que j'indiquais (bonne pratique) et que tu répondais en toute connaissance de cause...

... d'où mon message où j'exprimais mon étonnement de voir que tu mettais exactement <a_moderer>ce qu'il est déconseillé de faire</a_moderer>...
Je ne savais pas trop sur quel pied danser, croyant que c'était de la provoc'...

( pas taper, hein !

)

09 févr. 2007, 00:05

Merci pour toutes ces informations mais le problème
c'est que cela modifie le corps de la page.
Je voudrais que l'image agrandit soit superposée sur l'image reduite
(une sorte de calque).

09 févr. 2007, 00:10

tu peux encadrer l'image par un div fixé à la taille de la plus grande des images

09 févr. 2007, 01:39

Bonsoir,

Tu peux faire ça en javascript: l'image agrandie ne modifieras pas ta page et pourra être superposée à d'autres éléments de ta page ex : http://www.abciweb.net/test4.php

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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>
</head>
<body onload="MM_preloadImages('PHOTO/clermont.jpg')">
<img src="PHOTO/asmelloffox-100.png" id="image_v" onmouseover="MM_showHideLayers('image_gf','','show')" onmouseout="MM_showHideLayers('image_gf','','hide')" />
<img id="image_gf" style="position:absolute; left:120px; top:120px; visibility:hidden;" src="PHOTO/asmelloffox.png"  />
</body>
</html>

Par contre l'image agrandie ne peut pas être superposée à la vignette sinon mauvais fonctionnement du onmouseout.

09 févr. 2007, 01:49

Rebonsoir,

J'avais oublié de me connecter.

Précisions sur le code précédent : pour plusieurs images à agrandir il faudra mettre les grandes images en préchargement dans le onload comme ceci

Code : Tout sélectionner

onload="MM_preloadImages('PHOTO/asmelloffox.png','autre_images','etc')"

Note : il y avait une erreur dans l'image préchargée du code précédent, elle ne correspondait pas à l'image agrandie

Evidemment faut pas abuser étant donné que pour fonctionner correctement les grandes images doivent être téléchargées dans le navigateur client.
Elles doivent donc être en nombre limité surtout si l'on pense à ceux qui n'ont pas l'ADSL

11 févr. 2007, 01:55

Merci pour toutes ces reponses.

Agrandir une image en javascript

Qui est en ligne