Flickering element, not resolved

Question

Hello,

I have a PHP page with the following code:

echo "function createimg() { var img = new Image();  img.src='path/to/image';  img.alt='Next image';  img.id = 'span1'; img.style.zIndex = 10;  img.style.position = 'absolute';  img.style.display='none'; img.style.top = '130px';  img.style.padding='10px'; img.style.left='440px';    img.className ='dynamicSpan';   document.body.appendChild(img); return img; }";

the function createimg get's executed when another image on the page loads.

code: someotherimage.load(createimg);

This created image is shown when the mouse is hovered over the 'someotherimage'.

It flickers! I cannot embed it into the other image! No CSS sprites thus.

I cannot seem to find a solution to this flickering problem, as I can't seem to attach event handlers to this image created in the above function, so I can suppress event bubbling/phasing!

Somebody help me please?

T

Answer 1

I think that problem is in the event propagation of the hovered image ('someotherimage') as mouse events are generated too frequently. Try changing visibility smoothly (not instantly with display=block/none).

It is best to use jQuery as it also offers mouseover, mouseout and mousemove function which you can easily attach to your image(s).

jQuery example:

$(document).ready(function() {
    $('.image').mouseover(function(e) {
        // show your element
    }).mousemove(function(e) {
        // move your element according to cursor
    }).mouseout(function() {
        // hide your element
    });
});

Variables e.pageX, e.pageY contains mouse coordinates.

If you don't want to use jQuery, try to add javascript timeout instead of changin visibility instantly (be careful of adding only 1 timeout at time).

for example:

setTimeout("hide(elementIdOrSo)", 100);

If my answer won't help you, provide more related code.

Also, please remove PHP tag (as this issue is purely javascript related) and instead of long inline echo call put there some newlines.