18041 sujets

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

Aide pour afficher élément en survole

Salut à tous,

je viens sollicité votre aide, afin de savoir s'il y a une personne capable m'aider afin de faire apparaitre l'image id "FF" qui est masqué par (display:none;) lorsque la souris survol l'image id "AP"?


<head>
<style type="text/css">

#FF {
	position:absolute;
	display:
	z-index:30;
	right:125px;
	top:125px;
}
#AP {
	position:relative;
	top:1px;
	cursor: pointer;
}

</style>
<script type="text/javascript">



</script>
</head>

<body>

<img id="AP" src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" width="15" height="11'"  /><br />

<img id="FF" src="http://swisselegancy.com/images/Autres/F.png" alt="Contenu & accessoires" width="410px" height="352px" />

</body>
</html>


J'ai quand même pris la peine avant de faire des recherches à ce sujet, mais malheureusement je parviens pas à maitriser le javascript.

Merci d'avance pour vos info!
Modifié par qwertz1 (12 Nov 2012 - 20:47)
Quelque chose de ce style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
a.tooltip #FF {
	display: none;
	width: 410px;
	top: 100px;
	left: 100px;
}
a.tooltip:hover #FF  {
	display: inline;
	position: absolute;
}
</style>
</head>

<body>
<a class="tooltip" href="#">
<img src="http://swisselegancy.com/images/Autres/Appareil_photo.png" alt="details" width="15" height="11'"  />
<img id="FF" src="http://swisselegancy.com/images/Autres/F.png" alt="Contenu & accessoires" width="410px" height="352px" />
</a>
</body>
</html>

Sinon j'ai la version en javascript mais plus complexe...
Smiley biggrin
Modifié par rodolpheb (12 Nov 2012 - 22:23)
Sujet clos
Aller à