javascript, dom et clip

Version imprimable

Bonjour et bonne année à tous !
Dans un site assez complexe, je veux ajouter des images zoomées, dans le style du plugin jquery Cloud Zoom. Je n'ai pas réussi à intégrer ce plugin dans la complexité de mon site, alors, il me faut retrousser les manches.

Dans l'extrait de code ci après, je récupère zoom_panel qui était caché et le rends visible, je crée l'image (3648x2736) d'adresse xl fourni comme argument à l'appel de la fonction et j'espérais 'clipper' cette image à la taille voulue. Je vais ensuite faire varier les valeurs donnée pour clip de façon à balader l'image dans une fenêtre de 1024x768 en utilisant la position du curseur.
Code:

1 2 3 4 5 6 7 8 9 function zoomer(xl){ panel=document.getElementById('panel_zoom'); panel.style.visibility="visible"; gim=document.createElement('img'); gim.setAttribute("src",xl); gim.setAttribute('clip','rect(0px,1024px,768px,0px)'); panel.appendChild(gim); }
Ce code ne "clipe pas", je récupère l'image complète

J'ai bien sûr tenté d'autres formules magiques du genre gim.style.clip=...., avec ou sans px, mais rien
Où est donc l'erreur ?

05/01/2011, 16h44
Bovino

Code:

gim.setAttribute('clip','rect(0px,1024px,768px,0px)');

L'attribut clip n'existe pas :aie:
05/01/2011, 16h46
SpaceFrog

propriété de style clipTop clipLeft ....
05/01/2011, 17h25
tim1789

J'ai le même résultat, c'est à dire pas de résultat du tout avec

Code:

gim.style.clip="rect(0px,1024px,768px,0px)";

alors que c'est donné par http://www.w3schools.com/css/pr_pos_clip.asp
05/01/2011, 17h43
Invité

personnelement je ferait pas comme ca le mieux serait de relever la position de la souris par rapport a l'image en miniature ensuite imaginons que l'image en grand qui sera integre a un div avec un overflow soit trois fois plus grande que la miniature donc pour connaitre sa position il sufira de multiplier par trois la position de la souris par rapport a la petite image
05/01/2011, 18h13
SpaceFrog

html 5 ?

essaye d'attribuer individuellement les clipTop et Left

ou sans les px

Code:

style.clip = "rect(50,300,225,0)";
05/01/2011, 18h31
NoSmoking

Bonjour,

Code:

objet.style.clip = "rect( 50px 300px 225px 0px)";

avec des espaces et des unités, sauf pour auto bien sûr.
05/01/2011, 18h34
tim1789

J'ai essayé sans les px, bien sur, même résultat.
Pour les clip top, clip left... je ne sais pas trop comment faire.
J'ai un peu regardé avec div et overflow,mais je n'ai pas encore vraiment creusé, je vais le faire.

je vient de le faire il n'est donc pas entierement optimise mais il marche

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
28
29
30
31
32
33
34
35
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript">
 
function souris(s){
dde=(navigator.vendor) ? document.body : document.documentElement;
setX =s.clientX + dde.scrollLeft;
setY =s.clientY + dde.scrollTop;
}
 
navigator.appName.substring(0,3)=="Net" ? document.addEventListener("mousemove", souris, false) : document.attachEvent('onmousemove',function(){souris(event)});
 
function sensa(){
var clic=document.getElementById('clic')
var igmp=document.getElementById('igmp')
document.getElementById('igmg').style.left=-((setX-igmp.offsetLeft)*4)+(clic.offsetWidth/2)+'px'
document.getElementById('igmg').style.top=-((setY-igmp.offsetTop)*4)+(clic.offsetHeight/2)+'px'
}
 
</script>
</head>
<body>
 
<img src="grenouille.jpg" style='width:125px;position:absolute;top:200px;left:400px'id="igmp"  onmousemove='sensa()'>
 
<br><br><br><br><br><br>
 
<div id="clic" style='overflow:hidden;height:200px;width:200px'>
<img src="grenouille.jpg" style='position:relative;' id="igmg">
</div>
</body>
</html>

05/01/2011, 18h57
Invité

petite precision c'est une echelle de 4

Merci Mekal. A partir de cette page, j'ai obtenu à peu près ce que je voulais pour une photo de 3648x2736 px et une vignette de largeur 160
On peut voir ce que cela donne ici :
http://petiteflore.perso.sfr.fr/essai.php
(site que je recommande-sans essai.php-aux amateurs de fleurs sauvages)
Voici le code modifié

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
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript"> 
function souris(s){
  dde=(navigator.vendor) ? document.body : document.documentElement;
  setX =s.clientX + dde.scrollLeft;
  setY =s.clientY + dde.scrollTop;
} 
navigator.appName.substring(0,3)=="Net" ? document.addEventListener("mousemove", souris, false) : document.attachEvent('onmousemove',function(){souris(event)}); 
function sensa(){
  var clic=document.getElementById('clic');
  var igmp=document.getElementById('igmp');
  a=-((setX-igmp.offsetLeft)*16.4)-20;// (3648 la taille de la photo-1024 la taille de la fenêtre)/160 la taille de la vignette et -20 pour la position vignette
  a=a +'px';
  b=-((setY-igmp.offsetTop)*16.4)-20;
  b=b+'px'; 
  document.getElementById('igmg').style.left=a ;
  document.getElementById('igmg').style.top=b;
} 
</script>
</head>
<body> 
<img src="ph1xl.jpg" style='z-index:4;width:160px;position:absolute;top:20px;left:20px;border:2px solid #cccccc'id="igmp"  onmousemove='sensa()'> 
<div id="clic" style='overflow:hidden;height:768px;width:1024px;position:absolute;top:20px;left:20px;'>
<img src="ph1xl.jpg" style='position:relative;' id="igmg">
</div>
</body>
</html>

C'est bon sur Firefox et Opera, mais pas très fluide sur IE (toujours !!). Ceci étant, je n'ai pas encore intégré ceci sur le site final, mais je crois que ça ne posera pas de problême

14/01/2011, 17h12
tim1789

c'est bon

Un petit mot pour dire que c'est fait, j'ai intégré un zoom qui fonctionne bien sur le site dont je parlais initialement.
Merci à tous, plus particulièrement à Mekal