javascript, dom et clip

**tim1789** · 05/01/2011, 16h40

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 :

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

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 ?

**Bovino** · 05/01/2011, 16h44

Code :

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

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

L'attribut clip n'existe pas

**SpaceFrog** · 05/01/2011, 16h46

propriété de style clipTop clipLeft ....

**tim1789** · 05/01/2011, 17h25

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

Code :

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

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

alors que c'est donné par http://www.w3schools.com/css/pr_pos_clip.asp

Invité · 05/01/2011, 17h43

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

**SpaceFrog** · 05/01/2011, 18h13

html 5 ?

essaye d'attribuer individuellement les clipTop et Left

ou sans les px

Code :

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

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

**NoSmoking** · 05/01/2011, 18h31

Bonjour,

Code :

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

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

avec des espaces et des unités, sauf pour auto bien sûr.

**tim1789** · 05/01/2011, 18h34

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.

Invité · 05/01/2011, 18h34

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

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

Invité · 05/01/2011, 18h57

petite precision c'est une echelle de 4

**tim1789** · 06/01/2011, 14h42

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 :

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

**tim1789** · 14/01/2011, 17h12

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

javascript, dom et clip

JavaScript

Discussions similaires

Partager

Partager