Modification des info bulles

Version imprimable

bonjour,

j'ai des images réactives avec des info bulles lorsque l'on passe dessus. Jusque là tous va bien. J'aimerais modifier l'aspect des info bulles pour les rendrent plus agréable,est ce possible?

Code :Sélectionner tout - Visualiser dans une fenêtre à
part123456789101112131415161718192021222324252627282930313233343536373839404142434445

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carte dynamique</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='area/'+nr+'.png'
zone.onmouseout=function(){pic.src='area/0.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: 850; width: 950; background-image: url('area/img_toul1.png'); background-repeat: no-repeat">
<img id="hovered" src="area/0.png" usemap="#Map" width="950" height="850" />
 
<map name="Map">
 
<area href="http://www.toulouse.fr/accueil" target="blank" title="Commune de Toulouse - Grand Toulouse
Population: 446 340 habitants" onmouseover="swapPic(this,1)" shape="polygon" coords="387,333,389,327,390,319,392,311,394,301,395,291,391,283,391,275,346,318,339,319,334,326,333,329,329,335,328,340,318,347,324,344,335,356,339,368,349,375,342,375,335,385,334,388,331,389,331,389,327">
 
<area href=".\dossier_excel\Bla.xls" target="blank" title="Commune de Blagnac - Grand Toulouse
Population : 21 961 habitants" onmouseover="swapPic(this,2)" shape="polygon" coords="304,303,309,295,313,285,315,268,313,318,327,313,318,312,318,308,304,303,305,302">
 
 
<area href="http://www.ville-baziege.fr/actualites-50.html" target="blank" title="Commune Baziege - SICOVAL
Population: 3 048 habitants" onmouseover="swapPic(this,3)" shape="polygon" coords="721,627,766,648,783,672,790,672,799,681,791,707,762,733,748,728,744,732,740,727,735,727,706,701,705,693,699,691,691,683,697,658,716,627,720,626">
 
 
<area href=".\dossier_pdf\Bra11.pdf" target="blank" title="Commune de Brax - Grand Toulouse
Population: 2 521 habitants" onmouseover="swapPic(this,4)" shape="polygon" coords="84,319,154,341,158,352,152,357,139,363,119,358,98,338,77,331,84,318,85,318,86,319">
 
 
<area href="#" target="blank" title="Vous sortez de la selection des Communes" onmouseover="swapPic(this,0)" shape="polygon" coords="576,848,947,848,947,1,320,768,598,792,593,805,576,819">
 
 
<area href="#" target="blank" title="Vous sortez de la selection des Communes" onmouseover="swapPic(this,0)" shape="polygon" coords="0,1,729,531,737,528,773,518,774,504,770,495,776,506,798,514,794,535,803,555,804,575,820,576,848,1,848">
 
</map>
</div>
</body>
</html>

Merci et bonne soirée

26/08/2011, 21h15
Vil'Coyote

impossible de modifier l'apparence des infobulles sans passer par un script externe ou généré par toi.

exemple avec jquery :
http://www.nextum.fr/article-25-tiny...in-infobulles/
26/08/2011, 22h46
Marc31

generé par moi c'est à dire??
28/08/2011, 21h55
thelvin

C'est-à-dire avec du JavaScript qui dessine l'info-bulle, plutôt que laisser le navigateur faire ce qu'il veut de l'attribut title.
28/08/2011, 23h19
Marc31

Ok et en code ça donnerais quoi parce que je ne connais pas trop le javasrcipt.
29/08/2011, 11h32
Vil'Coyote

Citation:

Envoyé par peter11

Ok et en code ça donnerais quoi parce que je ne connais pas trop le javasrcipt.

ça donnerais le lien que je t'ai donné. donc peut être un peut de lecture car au final le forum n'est pas fait pour donner le code des appli mais aidé à corrigé celui fait par les utilisateurs.
29/08/2011, 17h18
devjcc

En fait, c'est beaucoup plus simple en CSS car il suffit de créer un div en position relative qui devient inline lorsque la souris pointe l'objet... ;)
30/08/2011, 16h35
Marc31

merci et ok mais j'ai cherché et je vois pas comment faire en css parce que apparemment on peut le faire que sur les balises <a> alors que moi les balises sont <area>!!
30/08/2011, 17h07
devjcc

Essaye sur GG en cherchant "css area hover" j'ai vu des idées.
Je n'ai pas d'exemple mais les balises "area" et "map" supportent le CSS.
@+
02/09/2011, 08h32
Marc31

Merci j'ai regardé mais rien ne marche!
02/09/2011, 11h04
NoSmoking

la solution qui t'a été proposée, faire ton info bulle perso, reste une solution simple à mettre en place, ce n'est qu'une DIV que tu affiches/masques...