Sélectionner une partie d'une image.

Sélectionner une partie d'une image.

Nous avons plusieurs moyens de sélectionner une partie d'un image, pour en montrer un élément important.

La page précédente (rideau) en utilise une qui est, je crois, assez facile à utiliser puisqu'elle ne demande qu'une ligne de code; on indique à un cadre, dont on détermine les dimension en fonction de la partie à conserver, d'avoir en arrière-plan, une partie bien précise de la grande image.

Voyons un exemple:

Code du montage
<div id="fd">
<p id="sel"> </p>
</div>
<style type="text/css"></style>

id="fd" est l'image de fond et id="sel" est le cadre blanc, placé dessus.
Sa position est définie en pixels (H et V) et il serait intéressant de pourvoir reprendre cette unité sur la sélection... mais, je ne sais pas !

Pour ne publier que la partie encadrée, nous allons écrire:

Code
<p id="sel1"> </p>
<style type="text/css"></style>
Nous déterminons la partie à afficher par sa position sur l'image; les dimensions du cadre de la vignette sont fonction de la partie à sélectionner et la partie du fond à sélectionner est définie par background-position (position du fond, le fond étant l'image totale).
D'après ce que je lis sur le net, il devrait être possible d'indiquer cette position en px mais ça ne fonctionne pas chez moi (?)

Grâce à ce principe, nous pouvons faire une ou plusieurs sélections sur une même image et, par exemple, la laisser en fond et en noir et blanc.

Dans ce cas particulier d'image de fond en noir et blanc et de sélections dessus, en couleur, il faut séparer les éléments noir et blanc et couleur et positionner les sélections couleur au bon emplacement, ce qui est le moins facile.

<div id="fda"> </div>
<p id="sela"> </p>
<p id="selb"> </p>
<p id="selc"> </p>
<style type="text/css"></style>
...