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.

**devjcc** · 29/08/2011, 17h18

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...

**Marc31** · 30/08/2011, 16h35

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>!!

**devjcc** · 30/08/2011, 17h07

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.
@+

**Marc31** · 02/09/2011, 08h32

Merci j'ai regardé mais rien ne marche!

**NoSmoking** · 02/09/2011, 11h04

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...

Modification des info bulles

HTML

Discussions similaires

Partager

Partager