Infobulle personnalisée sur image map

Résolu
Eliza -  
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,
Je souhaite réaliser des infobulles comme sur Ateliers Dinand de Sikarr: pas moyen d'obtenir des bulles à la taille adéquate, contenant un texte en couleur, sur un fond coloré aussi. J'ai observé son code, ai réussi à placer un rollover et modifier le texte dans la petite bulle standard (sur image réactive). Je sèche et m'énerve ...J'aimerais aussi supprimer le message automatique généré par IE qui empêche l'affichage du contenu son.... Je ne suis pas du tout spécialiste et je tatonne avec le code...
Merci pour votre aide.

Eliza
A voir également:

11 réponses

juanou Messages postés 137 Date d'inscription   Statut Membre Dernière intervention   58
 
Salut Eliza.

Pour des infobulles personnalisées, tu peux utiliser le script présenté sur cette page : https://reactdom.com/restful-api/

Il accepte pas mal d'options, qui permettent notamment de modifier l'apparence de la bulle.
Le tout est bien documenté.
2
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
Salut,

"comme sur Ateliers Dinand de Sikarr"


Késako ?
0
Eliza
 
Salut,

Ateliers Dinand, c'est un site réalisé par Sikaar qui a posté en avril. On peut voir sur GGle, ateliers dinand (en 2ème position). Il a crée un logo : image mappée+infobulle personnalisée, cà dire que tu peux affecter une police, des couleurs, une taille, à l'infobulle. J'ai essayé de faire comme lui, avec mes couleurs, j'ai sûrement mal placé mon code car cela n'a pas marché. Par ailleurs dans un autre de ses posts, il disait qu'il avait réussi à virer le message d'alerte généré par IE, qui bloque l'affichage de contenu (son dans mon cas), en modifiant le code. Mais il n'explique pas ce qu'il faut modifier, dommage...
0
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
"On peut voir sur GGle, ateliers dinand (en 2ème position)."
Non mais on va pas chercher 1 heure le site, donne le lien.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Eliza
 
http://www.ateliers-dinand.com/fr/
Voilà !
0
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
C'est la class CSS listmenu qui formate le style des info bulles.
0
Eliza
 
Ok merci ! Voici une partie de mon code.

<area shape="rect" coords="107,113,232,180" href="pageson.html" target="_blank" /alt="SON"onmouseover="displaydivision(O)"onmouseout="hidedivision(0)">

J'avais positionné ceci :<div ID="d1" class="listmenu"><p ALIGN="CENTER"><font FACE="Helvetica,Arial" SIZE="-1" COLOR="000000"><b>Nos prestations</b></font></p> à la suite, mais peut-être pas au bon endroit...
0
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
https://www.commentcamarche.net/contents/230-css-feuilles-de-style
0
Eliza
 
Merci S.Spark,
Je ne pensais pas qu'il était nécessaire de créer une feuille css spécifiquement pour les infos bulles. Pour le rollover j'ai simplement ajouté le code repéré sur le logo d'Ateliers Dinand...
0
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
Ca n'est pas "une feuille css spécifiquement pour les infos bulles", c'est du CSS, mettre le nom de la class ne suffit pas il faut après ajouter les attributs de style, soit dans la balise (inapproprié ici), soit dans les balise head soit dans une feuille de style.
0
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
il suffit de se donner la peine de chercher un peu ...
https://forums.commentcamarche.net/forum/affich-11745071-mettre-un-infobulle-avec-image-sur-aera-shape
te donne une super solution:
http://radservebeer.free.fr/demorad/goudspide/
l'est pas mauvais le RAD !!!!
(et pour ton site, il y a aussi bien du boullot au niveau optimisation si tu veux te positionner correctement !)
0