Position info-bulle div près de la souris
Position info-bulle div près de la souris - HTML/CSS - Programmation
Sujets relatifs:
- position shape dans feuille
- [Résolu] Calcul de position de point.
- PING et NSLOOKUP dans excel ! (avancement 80%)
- API Amazon, comment récuperer une info
- Mémoriser la position de l'ascenseur
- [Delphi] Listbox : changer un element de place avec la souris.
- XSLT: utilisation de la fonction position() dans <for-each> imbriqués
- JQUERY Drag & Drop : ma div reste collée a ma souris
- Récuperer la position d'une ligne
- [ A SUPPRIMER : Solution trouvée]
Marsh Posté le 18-10-2011 à 17:23:58
Bonjour,
je débute en html et j'ai un besoin particulier.
ma page contient une image, j'ai fait des zones réactives sur cette image, et pour bien visualiser les emplacements où on peut cliquer, en farfouillant dans les forums j'ai réussi à faire afficher une "info-bulle" plus visible que la seule utilisation de "title".
problème : cette "info-bulle" est fixe, et je n'arrive pas à la faire afficher près de la zone réactive, ou près de ma souris (ce qui revient au même). pour le moment, l'"info-bulle" est visible sur mon pc, mais lorsque je teste avec une configuration différente, l'"info-bulle" est située trop bas, ou trop haut, et elle sort de la page. on ne la voit pas.
question : comment faire pour que cette "info-bulle" ne sorte plus de ma page ?
Voici mon code :
<!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">
<head>
<title>Fiches auxiliaires</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
<!--
function noclic(clic)
{
var mess="Reproduction interdite"; //Vous pouvez changer ce message
if (navigator.appName == 'Netscape' && clic.which==3) {
alert(mess);
}
else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(mess);
}}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = noclic;
//-->
</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.Style1 {font-weight: bold}
<script type="text/javascript">
function afficher(info)
{
var tooltip = document.getElementById(info);
tooltip.style.visibility = "visible";
run= true ;
}
function masquer(info)
{
var tooltip = document.getElementById(info) ;
tooltip.style.visibility = "hidden";
run= false ;
}
</script>
-->
</style>
<style type="text/css" >
#info1 , #info2, #info3, #info4 {
position:fixed;
top:50%;
opacity:none;
background-color:#339933;
color:white;
width:300px;
border:solid 2px #000000;
height:80px;
left:50%;
top:50%;
margin-top:-125px;
margin-left:-150px;
/*opacity:0.8;*/
visibility: hidden;
font-family: Courier, "tahoma", monospace;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function afficher(info)
{
var tooltip = document.getElementById(info);
tooltip.style.visibility = "visible";
run= true ;
}
function masquer(info)
{
var tooltip = document.getElementById(info) ;
tooltip.style.visibility = "hidden";
run= false ;
}
</script>
<link href="../marcstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<img src="4%20-%20Fiches%20ravageurs.png" width="720" height="1040" border="0" usemap="#Map" />
<map name="Map" id="Fiche">
<!--LES NUMERO DES DIV INFO A METTRE -->
<area shape="rect" coords="5,145,216,215" href="cultures/3-Colza_ravageurs_automne.html" target="_self" onmousemove="afficher('info1')" onmouseout="masquer('info1')" />
<area shape="rect" coords="5,935,215,1026" href="cultures/3-Colza_ravageurs_automne.html" target="_self" onmousemove="afficher('info2')" onmouseout="masquer('info2')" />
</map>
</div>
<!--LES DIV INFO DEBUT-->
<div id="info1">
<p><br />Cliquez pour visualiser<br />les ravageurs de la culture.<br /></p>
</div>
<div id="info2">
<p><br />Cliquez pour consulter<br />les fiches auxiliaires.<br /></p>
</div>
<p> </p>
</body>
</html>
un grand merci d'avance à qui pourra m'aider!
sev