Discussion :

[tim1789]

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]

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]

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

[tim1789]

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

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]

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