Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2334 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  infobulles personnalisées sur image mappée...

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

infobulles personnalisées sur image mappée...

n°1348480
iaf_22
Posté le 18-04-2006 à 04:07:55  profilanswer
 

Bonjour a tous, :hello:  
j'ai une image d'un cockpit en jpg, et j'aimerai pouvoir expliquer chaque switch du cockpit en cliquant simplement sur l'image pour qu'une infobulle  apparaisse pour donner des explciations claires ( --> pouvoir ecrire dans l infobulle en differentes couleurs, taille, souligné, etc...)
pour etre clair, voici ce qui me serait idéal... http://www.meriweather.com/320/over/air.html#  (cliquez sur un des boutons de l'image...).
 
Comment est t'il parvenu à faire cela ??
 
je n'ai pas de connaissance javascript ni CSS, juste basique HTML dont les images mappées..
 
Merci d avance a quiconque pourra me donner une solution claire et simple :jap:


Message édité par iaf_22 le 18-04-2006 à 04:09:47
mood
Publicité
Posté le 18-04-2006 à 04:07:55  profilanswer
 

n°1348595
nargy
Posté le 18-04-2006 à 10:41:26  profilanswer
 

Tu place ton image mappée dans un div, position:relative.
Pour chaque infobulle, tu ajoute un div avec identifiant juste après l'image, en postion absolute avec le coordonnées de l'infobulle, caché au départ et un bout de javascript pour le cacher quant on clique dessus, et avec du texte et des images dedans.
 
Par exemple, une infobulle avec 10,10 pixels de décalage par rapport au coin haut/gauche de l'image:
<div style="position:relative">
<img ...>
<div id="infobulle_altimetre" style="position:absolute;top:10px;left:10px;display:none">
<b>Insérérer du texte <i>ici</i></b>
</div>
</div>
 
Deuxième étape, tu ajoute du javascript dans chaque area du map, pour rendre visible l'infobulle quand on clique sur l'area.
Par exemple:
<map ...>
<area ... onclick="javascript: getElementById('infobulle_altimetre').style.display='block';return false;">
</map>
 
De la doc CSS:
http://www.w3.org/TR/CSS1#display


Message édité par nargy le 18-04-2006 à 10:42:11

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  infobulles personnalisées sur image mappée...

 

Sujets relatifs
[css] padding sur une image et doctypeinserer un nombre finis d'image dans un dialog box
[Javascript/HTML] Afficher une image local image invisible sous mozilla
[Python/PIL] Librairie Image[ASP 2.0] User Control constitué d'une DDL + Image
Afficher une image selon requette sqlcode pour placer une image sur une UserForme
navigation avec imageFonction HTML to BMP gratuite ? Convertir une page Web en image...
Plus de sujets relatifs à : infobulles personnalisées sur image mappée...


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR