18073 sujets

Questions générales et questions de débutants

Faire apparaitre une image au survol d'un texte

bonjour,

j'ai un petit soucis, je dois faire de la description d'image, pour ce faire j'ai besoin de générer une page disposé comme sur l'image.

lorsque le texte "oeil" est survolé une image gif ou png représentant une flèche vient se placer sur l'oeil.
pour le texte "bouche" une flèche apparait au niveau de la bouche ...

je m'orientais vers le css, à l'aide d'un tableau une case pour l'image une autre pour la liste de mots.

je map générallement mes images de cette façon:


<img src="anat025.jpg" width="800" height="529" border="0" usemap="#map" />

<map name="map">
<area shape="poly" coords="575,331,600,354,561,366,535,368,490,333,573,331,572,329,575,332,572,332,574,331,576,330" alt="texte alternatif" target="cadre de destination" href="url a activer" />
</map>




à partir de cet exemple j'ai bien compris comment faire apparaitre l'image au survole du texte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a {
   text-decoration: none; /* définition du lien qui affichera le calque */
	 color: black;
   }
a:hover {
   background: none; /* correction d'un bug IE */
   }
a span { /* définition de la balise <span> inclue dans <a> */
   display: none;
   }
a:hover span { /* définition de la balise <span> au survol */
   display: block;
   }
img {
border:0;
}

dl, dt, dd {
margin:0;
padding:0;
}
dl {
float: left;
width: 150px;
text-align: center;
margin: 1em;
padding: 0.5em;
border: 1px solid black;
}
-->
</style>
</head>
<body>
<dl>
<dd><a href="#"><img src="image.gif" alt="" /><span>légende de l'image 1</span></a></dd>
</dl>

<dl>
<dd><a href="#">texte image 2<span><img src="image2.gif" alt="" /></span></a></dd>

</dl>

</body>
</html>


mais comment afficher l'image de fond et faire en sorte que la flèche apparaisse à un endroit prècis dessus?


merci d'avance Smiley biggrin
Sujet clos
Aller à