Image sur une image?

Version imprimable

25/02/2009, 20h24
greg13

Image sur une image?

Bonsoir,
J'ai des photos sur un site. Je voudrais pour certaines d'entre elles, afficher un petit triangle dans le coin de la photo, ou un autre petit dessin. Ce qui revient à mettre une petite image sur ma photo. Est-ce que c'est faisable en CSS, et avec compatibilité des navigateurs principaux? Ou bien dois-je voir plutôt du coté du Javascript (j'utilise jQuery)?
Merci d'avance

Bonjour,

Une solution serait de placer les deux images dans un bloc aux dimensions de la plus grande. Ce bloc positionné en relative.
Puis de positionner la petite image en absolute.

Par exemple

Code:

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
36
37
38
39
40
41
42
43
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      background-color: #deb887;
      color : #344979;
      }
    .conteneur_a_image {
      position: relative;
      width : 400px;
      height : 300px;
      background-color: #ffd;
      }
    img {
      display : block;
      }
    .la_grande {
      width : 400px;
      height : 300px;
      border : 2px dashed #000;
      }
    .la_petite {
      position : absolute;
      right : 6px;
      bottom : 6px;
      width : 60px;
      height : 80px;
      background-color: #aaf;
      }
    </style>
</head>
<body>
  <div class="conteneur_a_image">
    <img src="---" alt="g" class="la_grande" />
    <img src="---" alt="p" class="la_petite" />
  </div>
</body>
</html>

26/02/2009, 10h30
greg13

Oui c'est très bien, ça a l'air de fonctionner. Je me demande si plutot que de spécifier les deux images dans le html, si la petite ne pourrait pas être définie dans le CSS en utilisant un backround-image, ça m'arrangerait beaucoup pour rester consistant avec le reste de mon logiciel.

Merci
26/02/2009, 14h00
GihefBey

Citation:

Envoyé par greg13

Je me demande si plutot que de spécifier les deux images dans le html, si la petite ne pourrait pas être définie dans le CSS en utilisant un backround-imag

Si bien sûr.
On pourrait même s'y prendre comme ça pour les deux images.

Comment ferais-tu ?

-
26/02/2009, 21h59
greg13

Aucun problème, j'ai réussi à le faire. Tu peux voir le résultat sur le site
http://www.ngottignies.be
Sur les miniatures de la page d'accueil; un triangle apparait s'il y a des commentaires sur la photo. C'est pas top niveau design mais bon...

Merci pour tout
26/02/2009, 22h06
GihefBey

Ça marche (-:

Merci de déclarer le post comme étant résolu.

-