Info bulle avec texte + image sur carte
delph
-
BadGuitarist Messages postés 373 Statut Membre -
BadGuitarist Messages postés 373 Statut Membre -
Bonjour,
je débute avec le langage HTML et CSS.
je voudrais insérer des info-bulles sur une carte.
Exemple sur la carte de France que s'ouvre au survol de Paris
une info-bulle avec du texte et une image.
je ne veux pas utiliser "title" trop petit.
il y aura autant d'info-bulles que de villes... sur la même carte.
je cherche depuis longtemps, j'ai trouvé des scripts Java que je ne sais utiliser...des codes CSS mais
sans indiquer comment j'insère les coordonnées de la ville sur la carte...
help please... mais simplement si possible!!!
Delph
je débute avec le langage HTML et CSS.
je voudrais insérer des info-bulles sur une carte.
Exemple sur la carte de France que s'ouvre au survol de Paris
une info-bulle avec du texte et une image.
je ne veux pas utiliser "title" trop petit.
il y aura autant d'info-bulles que de villes... sur la même carte.
je cherche depuis longtemps, j'ai trouvé des scripts Java que je ne sais utiliser...des codes CSS mais
sans indiquer comment j'insère les coordonnées de la ville sur la carte...
help please... mais simplement si possible!!!
Delph
A voir également:
- Créer une bulle avec texte
- Comment créer un groupe whatsapp - Guide
- Créer un compte google - Guide
- Créer une adresse hotmail - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
3 réponses
Bonjour Delph,
Grâce à la balise img et son attribut map, tu peux le faire directement en html ... sous réserve que j'ai bien compris ton besoin :
voici un tutorial : http://www.allhtml.com/articles/detail/371
voici un exemple d'utilisation : https://frankmanno.com/ideas/css-imagemap/
Bonne année 2010.
Grâce à la balise img et son attribut map, tu peux le faire directement en html ... sous réserve que j'ai bien compris ton besoin :
voici un tutorial : http://www.allhtml.com/articles/detail/371
voici un exemple d'utilisation : https://frankmanno.com/ideas/css-imagemap/
Bonne année 2010.
Merci pour ton aide, mais entre temps j'ai trouvé un javascript que j'ai adapté à mon site.
sur le coup j'étais super contente car il était plus simple que ton exemple.
tout fonctionnait sur Firefox mais après vérification pas sur IE , la cata!!!
Je ne comprends pas car le site dont je me suis inspirée : RAD ZONE Webcreation fonctionne sur les 2.
qui a-t-il sur l'affichage source que je n'ai pas considéré pour qu'il soit compatible IE ???
Voilà ce que j'ai copié :
- dans ma page CSS :
#info1
{
position: absolute;
width: 350px;
top: 180px;
left: 50%;
margin-left: -175px;
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;
}
- dans ma page HTML que j'ai mis dans HEAD :
<script type="text/javascript">
//<![CDATA[
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>
- et toujours dans ma page HTML dans le DIV concerné (une carte):
<area shape="circle" href="#" coords="089,420,177,437" alt="map" onmousemove="afficher('info1')" onmouseout="masquer('info1')" />
avec tout ça, c'est impécable sur Firefox, mais rien à faire sur IE
merci d'avance si tu peux m'aider, je ne vois aucune solution.
a +
Delphi
sur le coup j'étais super contente car il était plus simple que ton exemple.
tout fonctionnait sur Firefox mais après vérification pas sur IE , la cata!!!
Je ne comprends pas car le site dont je me suis inspirée : RAD ZONE Webcreation fonctionne sur les 2.
qui a-t-il sur l'affichage source que je n'ai pas considéré pour qu'il soit compatible IE ???
Voilà ce que j'ai copié :
- dans ma page CSS :
#info1
{
position: absolute;
width: 350px;
top: 180px;
left: 50%;
margin-left: -175px;
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;
}
- dans ma page HTML que j'ai mis dans HEAD :
<script type="text/javascript">
//<![CDATA[
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>
- et toujours dans ma page HTML dans le DIV concerné (une carte):
<area shape="circle" href="#" coords="089,420,177,437" alt="map" onmousemove="afficher('info1')" onmouseout="masquer('info1')" />
avec tout ça, c'est impécable sur Firefox, mais rien à faire sur IE
merci d'avance si tu peux m'aider, je ne vois aucune solution.
a +
Delphi
Bonjour,
Je suppose que tu as un problème d'affichage (ou de disparition) de ton info-bulle.
Pour :
tooltip.style.visibility = "hidden";
sous IE, moi j'utilise :
- pour afficher : document.getElementById("idDivRecherche").style.display='';
- pour cacher : document.getElementById("idDivRecherche").style.display='none';
Je pense que cela résoud ton problème ... bien que tu nous as pas dit quel est ton problème ;-)
Bon courage.
Je suppose que tu as un problème d'affichage (ou de disparition) de ton info-bulle.
Pour :
tooltip.style.visibility = "hidden";
sous IE, moi j'utilise :
- pour afficher : document.getElementById("idDivRecherche").style.display='';
- pour cacher : document.getElementById("idDivRecherche").style.display='none';
Je pense que cela résoud ton problème ... bien que tu nous as pas dit quel est ton problème ;-)
Bon courage.
