aide explication ligne javascript

Version imprimable

Bonjour,

Comment interpreter ce code?

Code:

1
2
3
4
5
6
7
8
 
var ratio = 5; // ratio taille thumbnail / taille image
var thumb_x = 100; // largeur thumbnail
var thumb_y = 119; // hauteur thumbnail
image_x = (xcoord*ratio)-Math.round(thumb_x/2);
image_y = (ycoord*ratio)-Math.round(thumb_y/2);
 
big_image.style.background = "black url(img_big.jpg) no-repeat scroll -"+image_x+"px -"+image_y+"px";

Que fait la ligne qui modifie le background avec les valeurs image_x et image_y?

03/03/2009, 14h16
calitom

Comment faire pour dimensionner une image en background?
03/03/2009, 14h47
franculo_caoulene

Salut,

C'est du CSS, cette ligne place l'image de fond, style.background est un raccourcis définissant toutes les propriétés concernant le fond de l'élément. Ce qui nous intéresse ici plus particulièrement et la propriété CSS background-position (style.backgroundPosition en javascript).

Il n'est pas possible de définir les dimensions d'une image de fond (sauf en CSS3 peut-être).

En fait, je souhaite afficher une image dans une certaine dimension et une certaine position...

Si je met mon image en la dimensionnant comme je veux dans un div avec overflow hidden, comment faire pour par exemple la remonter de 100 pixels?

En gros je veux afficher mon image sans la partie haute...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 document.getElementById('image_cadre').style.width="400px"; document.getElementById('image_cadre').style.height="400px"; var img = new Image(); img.id="image_resize"; img.src = "../images/"+nom_image; img.width = 400; img.height = Math.round((height*400)/width); document.getElementById('image_cadre').style.overflow="hidden"; document.getElementById('image_cadre').appendChild(img);
Dois je agir sur le top du div image_cadre ou sur le top de mon image (image_resize) ou sur le overflowX?...

En gros comme overflow du div image_cadre est hidden, si je remonte l'image, la partie remontée ne doit plus être visible dans le div...

Mais comment remonter l'image?

03/03/2009, 15h53
franculo_caoulene

Avant d'éventuellement répondre, j'aimerais que tu répondes avant à une question. Tu dis :

Citation:

Envoyé par calitom

En fait, je souhaite afficher une image dans une certaine dimension et une certaine position...

Pourquoi? Quelle est le but? C'est juste pour savoir si on ne peut pas passer par une solution plus simple, car j'ai pas tout compris. De plus, je ne sais pas s'il y a plus simple.
03/03/2009, 16h02
calitom

En fait je veux rogner une image. J'avais tout un truc en ajax avec la fnction php de la libriaire GD imagecopyresampled, mais la memory_limit de mon serveur ne me permet pas d'utiliser cette solution pour des grosses images...

Très dommage!!

Du coup, je veux simuler le rognage en affichant mon image dans un div qui à la taille du rognage avec overflow hidden. Comme ca on a l'impression à l'écran que l'image est rognée, mais en fait, elle est entière dans le div, et on a l'impression qu'elle est rognée car le div étant limité en taille, l'image n'apparait pas completement à l'écran...

Le dernier problème qu'il me reste, c'est de pouvoir déplacer mon image dans le div pour cacher le haut et le côté gauche de l'image que je ne veux pas voir...

Donc il faut que j'arrive à déplacer mon image dans le div...

Je sais pas si c'est clair ce que j'ai dis, mais je reste dispo pour plus de détails....

Comme je t'ai dit ton problème est avant tout CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Rogner une image</title>
  <style type="text/css">
  * {margin:0;padding:0;border-style:none;text-decoration:none;color:#333;}
  div {padding:10px;width:80px;height:80px;position:relative;overflow:hidden;border:1px solid #666;background:#aaa;}
  img {margin:0;padding:0;display:block;position:absolute;top:-10px;left:-10px;}
  </style>
</head>
<body>
  <div><img src="img/photo-miniature.jpg" alt="photo" /></div>
</body>
</html>

Je pense que tu peux t'en tirer pour traduire ça en javascript, si nécessaire.

J'ai trouvé!!
Voici le code:

Code:

1
2
3
4
5
6
7
var img = new Image();
	 img.id="image_resize";
	 img.src = "../images/img_cadre/"+nom_image;
	 img.style.position="relative";
	 img.style.top="-"+(objPos.top-containPos.top)+"px";
	 img.style.left="-"+(objPos.left-containPos.left)+"px";