Accueil » Afficher des infobulles sur des objets

Afficher des infobulles sur des objets

Ecrit par Arnaud le 22/08/2008.
| |

résumé: 
Ce tutoriel est un enrichissement de la librairie OpenLayers via un script permettant l'affichage d'infobulles
pré-requis: 

- Disposer de la librairie OpenLayers

- Introduction -

Pour la réalisation de la page des DCP de La Réunion j'avais besoin de pouvoir au survol de la souris d'afficher une infobulle contenant le nom de l'objet. Pour cela j'ai mis au point un petit script que je vous présenterai ci-dessous.

- Intégration du script -

Après avoir téléchargé le script des infobulles il vous suffit de l'inclure dans votre page de la manière suivante :

<head>
   <script src="pathToScript/toolTips.js" type="text/javascript"> </script>
   <script src="pathToScript/OpenLayers.js" type="text/javascript"> </script>
</head>

- Définir un style pour la barre d'outils -

Dans l'exemple qui va suivre, nous allons utiliser le script toolTips.js pour afficher le nom du pays au survol, de la souris

     marker1.events.register("mouseover",{'feature': feature1,'bgColor':'blue','fontColor':'white','opacity':'0.5'}, toolTips);
     marker1.events.register("mouseout", feature1, eraseToolTips);

marker1 est obtenu à partir de la méthode createMarker() de l'objet Feature. Le nom de chaque pays est en fait l'ID de l'objet feature, enfin, vous avez la possibilité de personnaliser les toolTips en modifiant les valeurs de 'bgColor','fontColor','opacity'.

L'exemple ci-dessous très simpliste présente l'utilisation de ce script:

Retour en haut

Il n'y a pas de lien pour le

Par @dalBron (non vérifié), le mer, 07/01/2009 - 10:24pm.

Il n'y a pas de lien pour le script ?

Sinon, un super site ! Continuez comme ça les gars, ça m'aide beaucoup !

Bonjour et merci de m'avoir

Par Arnaud, le jeu, 07/02/2009 - 7:03am.

Bonjour et merci de m'avoir fait remarqué le lien absent.
Ce script des tooltips n'est plus d'actualité. Je vous conseille plutôt de télécharger celui-là. En plus d'être complètement orienté objet il permet une plus grande personnalisation.

Arnaud

ok merci beaucoup Arnaud a+

Par @dalBron (non vérifié), le jeu, 07/02/2009 - 2:31pm.

ok merci beaucoup Arnaud

a+