Voici une nouvelle variante de page consacrée à info-bulle "Framedcloud", en complément à ma collection de modèles "pour les nuls"
Est-il possible de retroucher le look de la bulle en ajoutant une couleur de fond par exemple ?
Voici une nouvelle variante de page consacrée à info-bulle "Framedcloud", en complément à ma collection de modèles "pour les nuls"
Est-il possible de retroucher le look de la bulle en ajoutant une couleur de fond par exemple ?
As-tu essayé quelque chose comme:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 feature.popup.backgroundColor = "#CC99CC";
Testé ICI : Toujours pareil
Au fait, la forme particulière de la bulle "Framedcloud" ne proviendrait-elle pas d'une image et n'est-il pas nécessaire d'agir sur l'image elle-même pour modifier son aspect ?
Le cas échéant, il resterait à trouver cette image avec ses styles CSS pour une gestion "locale", mais c'est peut-être très compliqué à faire ?
Il y a une page de tests des popups OpenLayers
http://openlayers.org/dev/examples/popupMatrix.html
Tu peux jouer avec le style .olFramedCloudPopupContent pour la couleur de fond par exemple, mais la bulle restera blanche
Mais aussi sur la propriété imageSrc à écraser à la main après la création de l'objet OpenLayers.Control.FramedCloud. Cette propriété utilise l'image suivante (issue d'OpenLayers)...
Cette info du site Openlayers donne la piste pour écraser l'image d'origine FramedCloud.
Par contre mon code n'est sans doute pas au point car la nouvelle image de popup ne s'affiche qu'au 2e clic.
Page d'essai (modif à la ligne 87).
Une idée d'où vient le problème ?
En définitive, la solution était très simple.
Il suffit de placer le code juste après la fonction de chargement de l'API (ligne 101 dans l'exemple).
Par contre il est inutile de surcharger le CSS OpenLayers.
Code : Sélectionner tout - Visualiser dans une fenêtre à part OpenLayers.ImgPath = "images/mon-répertoire/";
Ensuite, on peut faire varier le style framedcloud à l'infini en modifiant simplement l'image "cloud-popup-relative.png" que l'on place dans le répertoire indiqué.
- Variante 2
- Variante 3
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager