Superpositionnement d'image et retour à la ligne

**Katarn** · 29/09/2007, 22h46

Bonjour à tous,

Je suis en pleine création d'un site. Cependant ne possèdant que les bases du langage html, je n'arrive pas à résoudre mon problème.
Je cherche donc à superpositionner deux images en donnant a celle du dessus des coordonnées par rapport au bord gauche de la page et au haut de la page.
Pour l'instant je possède ce code:

Code :

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
<html>
<head>
<style type="text/css">
.imagedessous { 
  position : absolute;
  z-index : 1; 
}
                                   
.imagedessus { 
  position : absolute; 
  z-index : 2; 
}
</style>
<body>
<img src="img1.jpg" class="imagedessous" title="mon_image1">
<img src="img2.jpg" class="imagedessus" title="mon_image2">
</body>
</html>

Mes images sont donc bien supersposés, cependant je ne sais pas où insérer les balises top et left pour pouvoir positionner la deuxieme image.

Ensuite au survol de la deuxieme image j'aimerais qu'un texte apparaisse sur plusieurs lignes. J'ai trouvé un tuto sur le site expliquant comment faire pour la balise alt et cela marche pour ie. Cependant je travaille toujours avec mozilla et j'aimerais savoir si les retours à la ligne dans un title était possible.

Merci d'avance

**Madfrix** · 30/09/2007, 00h11

Salut, essaies avec ça :

Code :

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

1
2
3
4
5
6
7
 
.imagedessus { 
position : absolute; 
top:Xpx;
left:Ypx;
z-index : 2; 
}

avec X et Y des nombres

tu peux aussi définir les grandeurs de tes images avec width et height.

A+

PS :

**Katarn** · 30/09/2007, 00h29

Merci Madfrix, ta méthode a parfaitement marcher :p

Me manque plus qu'à trouver comment revenir à la ligne :s

Je trouve l'info sur aucune forum, y'a peut être pas de possibilité pour mozilla :s.

**Madfrix** · 30/09/2007, 00h49

Personnellement, si je voulais faire apparaître un texte au dessus d'une image, je m'orienterais vers des div invisibles qui s'afficheraient lorsque la souris survolerait l'image.

Ex :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<DIV id="IMG1">Le commentaire ici sur ton image</DIV>
 
<img src="..." onMouseover="document.getElementById('IMG1').style.visibility = 'visible';" onMouseout="document.getElementById('IMG1').style.visibility = 'hidden';">
 
/* et ton code CSS : */
 
#IMG1{
position:absolute;
top:...
left:...
visibility:hidden;
}

Avec ce bout de code tu ne devrais plus avoir de problème

A+

**Madfrix** · 30/09/2007, 00h57

Précision : tu peux mettre ton image dans ton div tu gagneras en visibilité et en lignes de code. Avantage : une seule définition de coordonnées pour l'image et le div

**Katarn** · 30/09/2007, 12h44

Merci beaucoup ca marche nickel.

Superpositionnement d'image et retour à la ligne

HTML

Vue hybride

Discussions similaires

Partager

Partager