[HTML 4.0] 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

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.

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

26/08/2011, 21h15	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 305 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 305 Points : 4 485 Points : 4 485	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/
	00

26/08/2011, 22h46	#3
Marc31 Invité de passage Inscription : août 2010 Messages : 128 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2010 Messages : 128 Points : 1 Points : 1	generé par moi c'est à dire??
	00

28/08/2011, 21h55	#4
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 068 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 068 Points : 6 992 Points : 6 992	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.
	00

28/08/2011, 23h19	#5
Marc31 Invité de passage Inscription : août 2010 Messages : 128 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2010 Messages : 128 Points : 1 Points : 1	Ok et en code ça donnerais quoi parce que je ne connais pas trop le javasrcipt.
	00

29/08/2011, 17h18	#7
devjcc Futur Membre du Club Inscription : mai 2006 Messages : 49 Détails du profil Informations personnelles : Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations forums : Inscription : mai 2006 Messages : 49 Points : 18 Points : 18	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...
	00

30/08/2011, 16h35	#8
Marc31 Invité de passage Inscription : août 2010 Messages : 128 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2010 Messages : 128 Points : 1 Points : 1	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>!!
	00

30/08/2011, 17h07	#9
devjcc Futur Membre du Club Inscription : mai 2006 Messages : 49 Détails du profil Informations personnelles : Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations forums : Inscription : mai 2006 Messages : 49 Points : 18 Points : 18	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. @+
	00

02/09/2011, 08h32	#10
Marc31 Invité de passage Inscription : août 2010 Messages : 128 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2010 Messages : 128 Points : 1 Points : 1	Merci j'ai regardé mais rien ne marche!
	00

02/09/2011, 11h04	#11
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 779 Points : 4 779	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...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email