javascript, dom et clip [Résolu]

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

mekal · 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.

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

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

05/01/2011, 16h44	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Code : Sélectionner tout - Visualiser dans une fenêtre à part gim.setAttribute('clip','rect(0px,1024px,768px,0px)'); L'attribut clip n'existe pas __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

05/01/2011, 16h46	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	propriété de style clipTop clipLeft .... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/01/2011, 17h25	#4
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	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
	00

05/01/2011, 17h43	#5
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	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 __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

05/01/2011, 18h13	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	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)"; __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/01/2011, 18h31	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 926 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 926 Points : 4 737 Points : 4 737	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.
	00

05/01/2011, 18h34	#8
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	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.
	00

05/01/2011, 18h57	#10
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	petite precision c'est une echelle de 4 __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

14/01/2011, 17h12	#12
tim1789 Futur Membre du Club Inscription : mai 2007 Messages : 61 Détails du profil Informations forums : Inscription : mai 2007 Messages : 61 Points : 15 Points : 15	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email