Modification des info bulles

**Marc31** · 26/08/2011, 20h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Vil'Coyote** · 26/08/2011, 21h15

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/

**Marc31** · 26/08/2011, 22h46

generé par moi c'est à dire??

**thelvin** · 28/08/2011, 21h55

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.

**Marc31** · 28/08/2011, 23h19

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

**Vil'Coyote** · 29/08/2011, 11h32

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.

Modification des info bulles

HTML

Vue hybride

Discussions similaires

Partager

Partager