Apparition de fenetre après survol

Bonjour,

Je souhaiterai réaliser la chose suivante. Je pense que c'est réalisable en CSS mais je ne sais pas ou chercher.



Je souhaiterais qu'une petite fenetre de ce style apparaisse lorsqu'on survol un lien. Comment faire cela et comment gérer la forme de la fenetre ...

Hello,

Le mieux est de le faire en JavaScript, mais sinon n'oublie pas de faire une recherche dans les Tutoriels

Merci pour ces précisions. Cependant j'ai essayé ca :

<a class='pied_page'><img border='0' src='<?php echo $mosConfig_live_site;?>templates/red_evolution_twenty_nine/images/monnaie.gif'>&nbsp;&nbsp;Monnaie<span>Monnaie</span></a>

et le css :

a.pied_page{
        color: #8a7c6e; 
	font-size: 10px; 
	text-decoration: none; 
        vertical-align: center;
        margin-left: 0px;
	padding: 0px;
        }

a.pied_page:hover{
	color: #8a7c6e; 
	font-size: 10px; 
	text-decoration: none; 
        vertical-align: center;
        margin-left: 0px;
	padding: 0px;
	background: none; /* correction d'un bug IE */
}

a.pied_page span { /* définition de la balise <span> inclue dans <a> */
	display: none;
        color: #8a7c6e; 
	font-size: 10px; 
	text-decoration: none; 
        vertical-align: center;
        margin-left: 0px;
	padding: 0px;

	border-right-width: 1px; 
	border-left-width: 1px; 
	border-top-width: 1px; 
	border-bottom-width: 1px; 

	border-right-style: solid; 
	border-left-style: solid; 
	border-top-width: solid; 
	border-bottom-width: solid; 

	border-top-color: #bbbab5; 
	border-right-color: #bbbab5; 
	border-bottom-color: #bbbab5; 
	border-left-color: #bbbab5;

}

a.pied_page:hover span { /* définition de la balise <span> au survol */
	display: inline;
	position: relative;
	top: -20px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
	left: -20px;
	width: 500px;
	height: 500px;
	background : #fbf6f3;
	color: #000000;
        vertical-align: center;
        margin-left: 0px;
	padding: 0px;

	border-right-width: 1px; 
	border-left-width: 1px; 
	border-top-width: 1px; 
	border-bottom-width: 1px; 

	border-right-style: solid; 
	border-left-style: solid; 
	border-top-width: solid; 
	border-bottom-width: solid; 

	border-top-color: #bbbab5; 
	border-right-color: #bbbab5; 
	border-bottom-color: #bbbab5; 
	border-left-color: #bbbab5;

}

Mais j'obtiens cela : http://www.dartag.fr/www/

Ca decalle le texte des le survol
la taille de la fenetre n'est pas celle attendue a savoir 500*500 par exemple
je n'ai pas de bordure en haut et en bas
?


merci d'avance

Hello,

C'est normal puisque tu as choisi de le positionner en relatif et non en absolu, donc l'élément reste de type en-ligne et ne peut pas avoir de dimensions.

EDIT : si tu tiens absolument à ton positionnement relatif, il faudra passer de "display: inline;" à "display: block;"
Modifié par Raphael (28 Aug 2007 - 17:22)

C'est mieux de conserver un positionnement absolu ou relatif ? Que je prenne les bonnes habitudes dès maintenant ?

Comment positionner en absolu par rapport au bord du bas ? Car la hauteur de ma page varie tout le temps.

J'ai essaye bottom: 100px mais ca me la place en haut idem avec -100 ...


merci d'avance