Image sur une image?

**greg13** · 25/02/2009, 21h24

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

**GihefBey** · 26/02/2009, 00h06

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 html :

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

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>

-

**greg13** · 26/02/2009, 11h30

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

**GihefBey** · 26/02/2009, 15h00

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 ?

-

**greg13** · 26/02/2009, 22h59

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

**GihefBey** · 26/02/2009, 23h06

Ça marche (-:

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

-

Image sur une image?

CSS

Discussions similaires

Partager

Partager