Всплывающее изображение не остается на месте - PullRequest
Новая
       15

Всплывающее изображение не остается на месте

0 голосов
/ 25 сентября 2011

Всплывающие изображения для «ледяной белый» и «фиолетовый» всплывают в разных местах.Как мне сделать так, чтобы они оба появлялись в одной позиции?

1 Ответ

0 голосов
/ 25 сентября 2011

Не могли бы вы определить отдельный div, который использует абсолютную позицию, а затем при наведении курсора на Violet или Ice White нарисуйте всплывающее изображение внутри созданного вами div?

Так что-то вроде: 

var displayDiv = document.getElementById("displayDivID");

// draw popup image in the div
displayDiv.innerHTML = "<div id=\"violet\">...</div>";
displayDiv.style.display = "block"; // to show it

Таким образом, всякий раз, когда вам нужно отобразить изображение в одной и той же позиции, оно всегда рисуется внутри указанного вами div.

Я бы предположил, что у вас есть класс, который контролирует форматирование этого div, например, позиции играницы и т. д.

РЕДАКТИРОВАТЬ

Я взял ваш код с вашего сайта и добавил еще немного кода.

Сохраните этот код в виде HTML-страницы на своем компьютере и попробуйте.

Найдите последний фрагмент кода CSS прямо перед закрывающим тегом.Этот блок CSS контролирует внешний вид div и размещает его в середине страницы.CSS только устанавливает фиксированную позицию.В качестве альтернативы вы можете использовать javascript для динамического вычисления ширины и высоты окна браузера пользователя, а затем соответствующим образом отобразить код CSS, чтобы div всегда находился в середине браузера независимо от размера внутреннего изображения.

InВаш предыдущий фрагмент кода javascript для displayDiv, я исправил несколько вещей и добавил две функции, когда мышь находится над миниатюрой, а когда нет.При наведении курсора мыши URL-адрес изображения будет передан функции, которая будет использоваться для визуализации изображения в displayDiv.

Надеюсь, что это поможет.

EDIT 2 - Fade In and Out

Вы, конечно, можете.

Все, что вам нужно сделать, это изменить две функции на использование jQuery fadeIn () и fadeOut () следующим образом: 

function changeDisplay(bgImageURL)
{
    var displayDiv = document.getElementById("displayDiv");

    // draw popup image in the div
    displayDiv.innerHTML = 
    '<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';

    // show the display in case it was hidden before    
    $('#displayDiv').fadeIn();
}

function hideDisplay()
{   
    // hide it when the mouse rolls off the thumbnail
    $('#displayDiv').fadeOut();
}

Этот jQuery являетсяосновной.Проблема будет в том, что если вы быстро включите и выключите указатель мыши, это приведет к включению и выключению div, включению и выключению, включению и выключению даже если ваша мышь уже выключена.

Правильным способом было бы переделать код и использовать mouseEnter и mouseLeave для элементов thubmnail.

...