infobulle personnalisée sur image mapRésolu/Fermé

Question

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

juanou · Accepted Answer

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

s.spark · Answer

Salut,

"comme sur Ateliers Dinand de Sikarr"


Késako ?

Eliza · Answer

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

s.spark · Answer

"On peut voir sur GGle, ateliers dinand (en 2ème position)."
Non mais on va pas chercher 1 heure le site, donne le lien.

Eliza · Answer

http://www.ateliers-dinand.com/fr/
Voilà !

s.spark · Answer

C'est la class CSS listmenu qui formate le style des info bulles.

Eliza · Answer

Ok merci ! Voici une partie de mon code. J'avais positionné ceci :

Nos prestations

à la suite, mais peut-être pas au bon endroit...

s.spark · Answer

https://www.commentcamarche.net/contents/230-css-feuilles-de-style

Eliza · Answer

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

s.spark · Answer

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.

bg62 · Answer

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

Infobulle personnalisée sur image map

11 réponses

Discussions similaires

Newsletters