Мерцающий элемент, не разрешен

Question

У меня есть страница PHP со следующим кодом:

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; }";

функция createimg get выполняется при загрузке другого изображения на странице.

код: someotherimage.load(createimg);

Это созданное изображение показывается, когда мышь наводят на «someotherimage».

Мерцает! Я не могу встроить его в другое изображение! Таким образом, нет CSS-спрайтов.

Кажется, я не могу найти решение этой проблемы мерцания, поскольку я не могу прикрепить обработчики событий к этому изображению, созданному в вышеуказанной функции, поэтому я могу подавить всплывающее / фазирующее событие!

Кто-нибудь, помогите мне, пожалуйста?

T

Answer 1

Я думаю, что проблема заключается в распространении скрытого изображения («someotherimage»), поскольку события мыши генерируются слишком часто. Попробуйте плавно изменить видимость (не сразу с display = block / none).

Лучше всего использовать jQuery, поскольку он также предлагает функции mouseover, mouseout и mousemove, которые вы можете легко прикрепить к вашим изображениям.

Пример jQuery:

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

Переменные e.pageX, e.pageY содержат координаты мыши.

Если вы не хотите использовать jQuery, попробуйте добавить тайм-аут JavaScript вместо мгновенного изменения видимости (будьте осторожны, добавляя только один тайм-аут за раз).

например:

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

Если мой ответ вам не поможет, предоставьте больше кода.

Кроме того, удалите тег PHP (поскольку эта проблема связана исключительно с javascript) и вместо длинного встроенного эхо-вызова добавьте туда несколько новых строк.