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
la communauté d'entraide francophone dédiée au PHP
Position info-bulle div près de la souris
dsl, j'ai pas lu ton code dans le détails, car il aurait fallut que je le remette en forme dans un éditeur pour mieux l'apéhender ! (d'ailleurs penses aux [ html] .... [ /html] => sans espaces)...
le principe des bulles que tu veux mettre en place c'est :
ensuite pour la positionner de façon précise dans un environnement precis, il y a différents moyens ... en gardant body comme parent relatif (parent le plus proche ayant le style position:relative) et en mettant top et left de la popup identique à ceux de la souris (en javascript) on fait en sorte que la popup colle la souris
Bref, j'esperes t'avoir mis sur la piste, essaye de mettre qqch en place et nous donner des problèmes précis a résoudre
et pas tout ton code à rendre fonctionnel 
le principe des bulles que tu veux mettre en place c'est :
<div style="position:relative;" id="parent"> <!-- cellule parente nous servant de référence pour le positionnement -->
<div> <!-- cellule contenant les éléments cliquable et/ou contentant les events onOver -->
</div>
<div style="position:absolute;top:10px;left:20px;" id="popup"> <!-- popup positionné absolute -->
</div>
</div>
ensuite pour la positionner de façon précise dans un environnement precis, il y a différents moyens ... en gardant body comme parent relatif (parent le plus proche ayant le style position:relative) et en mettant top et left de la popup identique à ceux de la souris (en javascript) on fait en sorte que la popup colle la souris
Bref, j'esperes t'avoir mis sur la piste, essaye de mettre qqch en place et nous donner des problèmes précis a résoudre
et pas tout ton code à rendre fonctionnel