Sujet Précédent Sujet Suivant

Créer une carte interactive

Alex86 -  
 alex86 -
Bonjour,
Je veux créer une carte interactive d'un département en 4 parties. j'ai le fond de carte en jpeg, j'ai défini les zones réactives sous dreamweaver. Maintenant je souhaite qu'un texte apparaisse dans un encadré à côté de la carte pour donner des indications sur la partie du département lorsque la souris survole. Je pense que cela peut se faire avec un Javascript?

Quelqu'un peut-il m'aider?

Merci d'avance!
A voir également:

3 réponses

Réponse 1 / 3
alex86
 
Re bonjour,
je fais remonter mon post car je n'ai toujours pas trouvé la solution.
Quelqu'un peut-il m'aider?

Merci!
0
Réponse 2 / 3
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
regarde ce post ! il y as ta solution !!http://www.commentcamarche.net/forum/affich 11686756 texte sur une image?page=2#25

regarde l exemple , passe sur les tetes des personnes a gauche

ou copie ce code et adapte le !! 
<!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>    
<title>RAD ZONE Webcreation    
</title>    
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />    
<meta name="author" content="http://radservebeer.free.fr" />    
<meta name="generator" content="PSPad editor, www.pspad.com" />       
<style type="text/css" > 
 #info1 , #info2, #info3, #info4 {
	position: absolute;
	left: 400px;
	top: 250px;
	width: 350px;
	z-index: 1;
	color: #c8ddda;
	background-color: #242424;
	visibility: hidden;
	border: solid 2px #222;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	font-weight: bold;
	text-align: center;
	font-family: Courier, "Courier New", monospace;
}
</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> 
  </head>
  <body>
    <img src="http://familleidot.free.fr/numeriser0005.jpg" usemap="#Map" width="1000" height="728" /> 
    <map name="Map" id="Map">
      <area shape="circle" href="#" coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')" />
      <area shape="circle" href="#" coords="58,395,13" onmousemove="afficher('info2')" onmouseout="masquer('info2')" />
      <area shape="circle" href="#" coords="90,415,13" onmousemove="afficher('info3')" onmouseout="masquer('info3')" />
      <area shape="circle" href="#" coords="86,471,13" onmousemove="afficher('info4')" onmouseout="masquer('info4')" />
    </map>
    <div id="info1">
      <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.
      </p>
    </div>
    <div id="info2">
      <p>Voici Mr SANSOZ René, marié à Yvette SANSOZ
      </p>
    </div>
    <div id="info3">
      <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)
      </p>
    </div>
    <div id="info4">
      <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.
      </p>
    </div>
  </body>
</html>
0
Réponse 3 / 3
alex86
 
super Merci beaucoup.
J'ai également trouvé une solution avec une iframe intégré à coté de ma carte et qui affiche les infos entrées sur une autre page html appelée dans la iframe.
merci beaucoup!
0