1

I am using easybutton plugin for leaflet. Is there a possibility to display an image+some text when mouse is over on the button?

Here is my current code:

 var btn2 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'NoSources2',
    icon:'<img src=ico/closed_eye.png height="16" width="16"><span>   masquer le nombre de resources</span>',
      title: 'NoSources' ,
      onClick: function(control) {
                map.removeLayer(NoSources);
                control.state('NoSources1')},
    },
    {
     stateName: 'NoSources1',
    icon: '<img src=ico/oeil.jpg height="16" width="16"><span>   voir le nombre de resources</span>',
    title: 'NoSources',
    onClick: function(control)  {
    map.addLayer(NoSources);
    control.state('NoSources2')}, 
  }]
});
btn2.addTo(map);
1

The following describes a method for a mouseover image for an easybutton.

(1) Add an id to your easybutton:

var btn2 = L.easyButton ({position: 'topright', id:'sbut',

(2) Add event listeners to your button which call the mover and mout functions:

document.getElementById("sbut").addEventListener("mouseover", mover);
document.getElementById("sbut").addEventListener("mouseout", mout);

(3) Add to your HTML an image, substituting in the image {IMGURL}:

<div class "container">
    <div class "picture">
        <img alt="n e image" id="neimage" style="display: none" src="{IMGURL}"/>
    </div>
</div>

(4) create the function mover to display the image at mouse coords; note as your button is top right then the image width is subtracted to get it to display with the NE corner at mouse position:

function mover(event){
    var x = event.clientX;
    var y = event.clientY;    
    var img = document.getElementById('neimage');
    img.style.display = '';
    img.style.position = 'fixed';
    img.style.left = x - img.width + 'px';
    img.style.top = y + 'px';    
    img.style.zIndex = 1000;
    }

(5) create the function mout which will remove the displayed image when the mouse leaves the button:

function mout (event){
    document.getElementById('neimage').style.display = 'none';
}

References

display image position based on mouse click coordinates

addeventlistener

image dimensions

image z index

2
  • Thank you for extensive explanation, but I could not make it worked out. In case I am missing a point: is it something you already tested in some work? @JimT – Gamze May 17 '17 at 13:46
  • yes - tested as working in Chrome. Have you tried checking the console for error messages? – JimT May 17 '17 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.