Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2475 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Position info-bulle div près de la souris

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Position info-bulle div près de la souris

n°2106985
sevsave
Posté le 18-10-2011 à 17:23:58  profilanswer
 

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

mood
Publicité
Posté le 18-10-2011 à 17:23:58  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Position info-bulle div près de la souris

 

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ésJQUERY Drag & Drop : ma div reste collée a ma souris
Récuperer la position d'une ligne [ A SUPPRIMER : Solution trouvée]
Plus de sujets relatifs à : Position info-bulle div près de la souris


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR