Discussion :

[calitom]

Bonjour,

Comment interpreter ce code?

Code :

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

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?

[calitom]

Comment faire pour dimensionner une image en background?

[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).

[calitom]

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 :

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

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?

[franculo_caoulene]

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

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.

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