Question

I need to show a image upon another, than i use the these codes, but when my mouse is over the lisdel that is the list that shows the image, it desappear because it receives the mouseout event. It’s VERY hard to explain, but try debuggin it and move your mouse in the image that you will see it.

<script>
    var mouseOverListDel = false;
    // Detect if the browser is IE or not.
    // If it is not IE, we assume that the browser is NS.
    var IE = document.all ? true : false

    // If NS -- that is, !IE -- then set up for mouse capture
    if (!IE) document.captureEvents(Event.MOUSEMOVE)

    // Set-up to use getMouseXY function onMouseMove
    document.onmousemove = getMouseXY;

    // Temporary variables to hold mouse x-y pos.s
    var tempX = 0
    var tempY = 0

    // Main function to retrieve mouse x-y pos.s

    function getMouseXY(e) {
        if (IE) { // grab the x-y pos.s if browser is IE
            tempX = event.clientX + document.body.scrollLeft
            tempY = event.clientY + document.body.scrollTop
        } else {  // grab the x-y pos.s if browser is NS
            tempX = e.pageX
            tempY = e.pageY
        }
        // catch possible negative values in NS4
        if (tempX < 0) { tempX = 0 }
        if (tempY < 0) { tempY = 0 }
        // show the position values in the form named Show
        // in the text fields named MouseX and MouseY
        var txbX = document.getElementById('TextBox1');
        var txbY = document.getElementById('TextBox2');
        txbX.value = tempX;
        return true
    }


    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }



    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');

                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                      '" title="', escape(theFile.name), '"/>'].join('');
                    span.style.height = "65px";
                    span.style.width = "90px";
                    document.getElementById('list').insertBefore(span, null);

                    var del = document.createElement('del');
                    del.style.visibility = "hidden";
                    del.innerHTML = ['<img class="thumbdel" src="http://s7.postimage.org/fc6w3qjp3/del.png',
                                      '" title="', escape(theFile.name + "del"), '"/>'].join('');
                    document.getElementById('listdel').insertBefore(del, null);
                    del.addEventListener("click", function () { delClick(del, span) }, false);

                    del.addEventListener('mouseover', function () { opacityOn(del) }, false)
                    del.addEventListener('mouseout', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseover', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseout', function () { opacityOff(del) }, false);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    function delClick(imgDel, img)
    {
        var listImg = document.getElementById('list');
        listImg.removeChild(img);

        var listDelImg = document.getElementById('listdel');
        listDelImg.removeChild(imgDel);
    }

    function opacityOn(imgDel)
    {
        imgDel.style.visibility = "visible";
    }

    function opacityOff(imgDel)
    {
            imgDel.style.visibility = "hidden";
    }


    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Answer 1

Could you use CSS for this? Like :

.listDel {
    background: none;
}

.listDel :hover {
    background: URL("URL to image");
}

Of if you want to do a complex condition for the image to display in javascript why not think of it something like this :

var listdel = document.getElementById('listdel');
listdel.addEventListener('mouseover', 
    function () { window.mouseOverListDel = true; }
    , false);
listdel.addEventListener('mouseout', 
    function () { 
         setTimeout( 
             function () {  window.mouseOverListDel = false; }
             , 333
         );
    }
    , false);

And then in your opacityOn function (which presumably also hides the delete button image?) check if that flag is set (mouseOverListDel) and if it is, then you don’t want to hide the del button image, since you know that the mouse is over the list of delete images, and it should not hide anything.

Even if I have not totally understood your details, this pattern will help. Basically, you want to continue showing an image, even when locally the mouse departs that image’s boundary, but it is still in a ‘user relevant’ location to that image — i.e., it still “looks pretty close to that image” so it is helpful if we continue to display the image, and unhelpful if we don’t.

You could use a library like hoverIntent and use jQuery which makes things easier for this, or you can code it yourself, as I have given you an example of. The basic idea has two parts :

1. Set a flag for regions you are interested in when the mouse is over them, unset it when the mouse is not over them.
2. Check these flags from your other mouse over event handlers, to determine if the conditions you choose for the action (image display, image hide, or anything else) are met.
3. Here’s the clincher because of slight variations in the time of firing of the event, you will need to delay the checking of the flag slightly, by a small part of a second (you can test these millisecond values out). So you will need to delay the handler code in mouseout by say 333ms because the, for example, listdel mouseover even may not have yet fired when the del mouseout event fires and your code is executed.

4. Also : For extra points, these delays and conditions can be used to give you a more smooth UI. Maybe you allow some tolerance when a user, through their random meandering movements, slightly leaves the area of interest for you to display the image, but then comes back, within say 500ms — if you delay the checking of flags, and the mouseout handlers, you can tolerate this kind of accidental exit. But that part of the UI design is just up to what is useful for you.

   Also this line could be causing a problem :
   del.style.visibility = "hidden";
   Do you ever set it back to visible ? If not then your del will not show. opacity is not the same as visibility.