Infobulles dans une map ?

Fermé
Laesia Messages postés 6 Date d'inscription dimanche 2 février 2014 Statut Membre Dernière intervention 10 février 2014 - Modifié par Laesia le 9/02/2014 à 09:52
Laesia Messages postés 6 Date d'inscription dimanche 2 février 2014 Statut Membre Dernière intervention 10 février 2014 - 10 févr. 2014 à 18:24
Bonjour à tous !

Après diverses recherches sur Google, j'ai réussi à trouver comment mettre des infobulles pour un texte, pour une image... Mais impossible de trouver comme faire pour une map !

J'aimerais, selon les zones survolées (AREA) par l'utilisateur dans une map (<MAP NAME="map"><AREA SHAPE="" COORDS="" HREF=""></MAP><IMG class="" SRC="" USEMAP="map">), que des infobulles (texte) apparaissent (j'avais mis à la base de simples "Title" mais étant donné que j'aimerais les personnaliser et enlever le temps d'attente...).

J'ai tenté de placer des "<span>" pour essayer d'utiliser la méthode qui permet d'en mettre pour des images mais en vain.

Pourriez-vous m'aider ?
Merci d'avance.

1 réponse

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
9 févr. 2014 à 17:10
salut utilise title avec un plugin jquery en voici un excellant que j'utilise

http://code.drewwilson.com/entry/tiptip-jquery-plugin
1
Laesia Messages postés 6 Date d'inscription dimanche 2 février 2014 Statut Membre Dernière intervention 10 février 2014
9 févr. 2014 à 17:28
Merci ! Je ne connaissais pas. :) Je vais essayer ça de suite !
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 10/02/2014 à 02:18
Re salut

Comme je disais pas d'aide en MP donc voici la reponse du comment faire fonctionner tiptip.js

ne pas oublier d'integrer la bibliothèque jquery (par exemple jquery 1.8.2 min.js suffit) dans la balise <head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js></script>

et mettre cette class a tes liens :
class="someClass" href="page.php" title="le tooltip"

appeler le js et le css comme ca
<script src="chemin/jquery.tipTip.js"></script>
<link rel="stylesheet" href="chemin/tipTip.css" type="text/css">

et tu met en forme le tooltip avec Tiptip.css et Tiptip.js les explications de configurations sont sur cette page
http://code.drewwilson.com/entry/tiptip-jquery-plugin

(paragraphe configuration)

ne pas oublier de mettre dans le <head> afin d'appeler la fonction DOM dans la page ce script:
<script>
$(function(){
$(".someClass").tipTip();
});
</script>

voila
0
Laesia Messages postés 6 Date d'inscription dimanche 2 février 2014 Statut Membre Dernière intervention 10 février 2014
10 févr. 2014 à 18:24
Merci bien !
0