Une image avec transparence sur une autre image

Bonjour à tous,

Je débute dans la création de mon site internet dédiée à la collection de monnaies.
j'ai déjà avancé - gràce notamment à ce site - mais aujourd'hui j'aimerai enrichir mon site avec la mise en place d'une structure particulière.

je m'explique.

sur mon site je presente des monnaies et je les compare entre elles lorsqu'elles sont de même année ,de même type et de mêm atelier de frappe.
je fais cela en mesurant les écarts entre elles - c'est trés laborieux et mon travail n'est pas assez poussé pour être réellement exploitable.

j'aimerai scanné une sorte de papier millimétré avec des côtes et pouvoir lorsqu'on le désire afficher cette image par dessus la photo de la monnaie étudiée. il faut que l'image du papier millimetre puisse être assez transparente pour voir la monnaie en dessous et ainsi permettre de bien analyser la monnaie en question.

voilà - j'espère que vous avez compris ce que j'attendais.

dans l'attente de vos réponses. très sincèrement


pour la personne qui me permettra de réaliser ceci, je lui ferais un petit cadeau numismatique.

Bonjour,

I DO KNOW THAT CAPS LOCK IS CRUISE CONTROL FOR COOL, mais il serait préférable de ne pas rédiger les titres de sujets (ou le contenu des messages, bien sûr) en capitales.

Cela fait même partie des règles de la netiquette. Je cite: «Écrivez normalement en minuscule. UTILISER LES MAJUSCULES REVIENT À CRIER.»

Voilà pour le petit point de méthode.

Pour le problème abordé: ne serait-il pas plus simple d'afficher l'image de la monnaie par dessus une image de fond qui correspondrait à la grille millimétrée? Ce qui donnerait par exemple:

[b]HTML:[/b]
<div class="grille">
	<img src="monnaie-4687.png" alt="Pièce de Machin Truc" />
</div>

[b]CSS:[/b]
div.grille {
	background: white url(img/grille.png) no-repeat left top;
}
div.grille img {
	vertical-align: top;
}

Quelque chose du genre.

Pour la transparence, on a plusieurs possibilités:
- l'image de la monnaie a un fond opaque (blanc par exemple), et on se contente d'utiliser l'image de fond de div.grille comme un jeu de règles autour de cette image opaque (nota: dans ce cas, il faudra sans doute utiliser du padding pour div.grille, par exemple div.grille {padding: 15px;});
- l'image de la monnaie est totalement translucide (opacité à 70% par exemple), ou est opaque mais affichée avec une opacité partielle (via la propriété CSS opacity notamment);
- l'image de la monnaie est opaque avec un fond transparent qui laisse apparaitre la grille autour de la monnaie.

On fera bien attention à avoir des images dans la même résolution (par exemple 150 ou 300 dpi), et pas des images de monnaie dans une résolution et une grille dans une autre.

as tu lu ce post par exemple.

en prenant cette information et en mettant deux images dans des div passant l'un sur l'autre on peut avoir une image en transparence recouvrant l'autre.

<div style='z-index:1;position:absolute;top:0;left:0;'>
<img src='image2.jpg'></div>
<div style="z-index:2;-moz-opacity:0.4;opacity:0.4;
filter:alpha(opacity=40);position:absolute;top:0;left:0;">
<img src='image1.jpg'></div>

Mais faut-il encore que les images soit de mêmes tailles.

et que tu sois sûr que les pieces ai été prises en photo parfaitement a angle droit et a exactement la même hauteur de la piece.

edit:pop grillé
Modifié par CPascal (09 Jan 2008 - 22:24)

Florent V.
CPascal
...
Ah l'appât du gain...


Joke inside
Modifié par 6l20 (10 Jan 2008 - 10:37)