IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[SVG] Afficher une Tooltip


Sujet :

JavaScript

Mode arborescent

Invité [SVG] Afficher une Tooltip 13/04/2022, 10h34
NoSmoking Bonjour, peut-être... 13/04/2022, 15h51
Invité Bonjour, Merci pour cette... 13/04/2022, 16h25
NoSmoking Visiblement tu mélanges un... 13/04/2022, 21h31
Invité Le novice que je suis,... 13/04/2022, 23h51
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut [SVG] Afficher une Tooltip
    Bonjour,

    En suivant ce tutoriel :
    https://www.petercollingridge.co.uk/...ctive/tooltip/

    Je dois normalement utiliser ECMAScript.

    Dans mon SVG :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
      <script type="text/ecmascript"> <![CDATA[
     
        function init(evt) {
            if ( window.svgDocument == null ) {
            // Define SGV
            svgDocument = evt.target.ownerDocument;
            }
            tooltip = svgDocument.getElementById('tooltip');
        }
     
        function ShowTooltip(evt) {
            // Put tooltip in the right position, change the text and make it visible
            tooltip.setAttributeNS(null,"x",evt.clientX+10);
            tooltip.setAttributeNS(null,"y",evt.clientY+30);
            tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
            tooltip.setAttributeNS(null,"visibility","visible");
        }
     
        function HideTooltip(evt) {
            tooltip.setAttributeNS(null,"visibility","hidden");
        }
        ]]></script>
    Ajouter onload="init(evt)" dans l'élément SVG pour appeler la fonction init ().

    Ensuite, à la fin du SVG, ajouter le texte de l'infobulle :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
    Enfin, à chacun des éléments auxquels je souhaite ajouter la fonction de survol de la souris :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    onmousemove="ShowTooltip(evt)"
    onmouseout="HideTooltip(evt)"
    mouseovertext="Whatever text you want to show"
    Je suppose que c'est dû au fait que je réutilise plusieurs fois mon image SVG, mais je ne comprends pas comment le mettre en place.

    Pourriez-vous m'aider SVP ?
    Fichiers attachés Fichiers attachés
    Dernière modification par NoSmoking ; 13/04/2022 à 15h48.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 02/11/2010, 16h10
  2. Librsvg / cairo / pdf : afficher une image svg
    Par supers03 dans le forum GTK+ avec C & C++
    Réponses: 0
    Dernier message: 21/03/2008, 14h52
  3. Solutions pour afficher une fenêtre de type tooltip ?
    Par elitost dans le forum SWT/JFace
    Réponses: 10
    Dernier message: 13/01/2008, 23h35
  4. [SVG] Afficher SVG dans une JSP
    Par soli.f dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 17/07/2007, 12h12
  5. Afficher une image SVG à partir du Java
    Par choumane dans le forum Multimédia
    Réponses: 3
    Dernier message: 03/12/2006, 19h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo