trying to get onmouseenter and onmouseout working on new img in dom

Question

Environment: Safari 110.0.1, OSX (MacOS) 10.12.6

I am working on an image gallery type of display. There's an element that is loaded with an image by the Javascript; I want that element to have functionality on onmouseenter and onmouseout.

It would appear that I can't add those when I'm creating the img element, because the image is not loaded, and I read (somewhere, lol, it's been a long day) that an element has to be loaded before one can attach functions to it. I did try it in the HTML; no joy.

So I have a timer going, and I am trying to attach it there, but that doesn't work either - the functions are never called.

I tried starting the timer after the page is loaded, but, that doesn't work - the over/out functions still don't fire. The timer is definitely running, that's what forces the redraw if the page scaling changes, and that works. You can see what I want to happen with the mouse over/out by clicking the checkmark below the image.

Here's the page, all the HTML and Javascript code is visible there (lower on the page.) Any insight is appreciated.

The best I've been able to do so far is to get the events to attach to a surrounding div by specifying out in the HTML, where they do pretty much the right thing as far as the div is concerned. But when the mouse is over the image, it is out of the div, so the opposite of what I want happens: the onmouseout fires and the thing I want to have happen over the image goes away.

Is there some reason I can't attach these functions during the timer? Here's the timer code:

function mousingover()
{
    console.log('over');
    if (dismode == 1) return;
    show_image_notes('mypic');
}

function mousingaway()
{
    console.log('away');
    if (dismode == 0) return;
    show_image('mypic');
}

function ticker()
{
//    var pic = document.getElementById('mypic'); // get (eventually) ready element
//    var eltype = pic.nodeName;
//    console.log('eltype:',eltype);
//    pic.onmouseenter = function() { mousingover(); }
//    pic.onmouseout = function() { mousingaway(); }
//    console.log(pic.onmouseout);

    // When the display is rescaled, the width of this div changes
    // This is used to re-fire the calculation of where the notes go:
    var myAnchor = document.getElementById('picdiv');
    var xd = myAnchor.offsetWidth;
    if (working == 0 && xd != xdim)
    {
        working = 1;
        if (dismode == 1) show_image_notes('mypic');
        else              show_image('mypic');
        xdim = xd;
        working = 0;
    }
    tcounter = tcounter + 1;
    if (tcounter > 10 || tcounter < 0) // trying to delay so image has time to load
    {
        var pic = document.getElementById('mypic'); // get (eventually) ready element
        pic.onmouseenter = function() { mousingover(); }
        pic.onmouseout = function() { mousingaway(); }
        tcounter = 0;
    }
}

The console confirms that I am finding the IMG with that ID, which is correct, and also that the functions are attached. They just don't fire.

I'm actively working on this, so the code for the timer will change; the page always displays the code that's in use at the moment.

I'm trying to do this with pure Javascript.

Answer 1

I looked at your HTML, and you have a canvas element in there along with the img element. It looks like the canvas overlays the image, yes? If so, the canvas is going to get the mouse events, and the img won't see them.