Карта изображений с всплывающим окном изображения при наведении курсора на точку доступа

Я создаю календарь, в котором есть события в определенные дни. Календарь представляет собой jpg, для которого я создал карту изображений. Когда вы наводите курсор на горячую точку или «событие» в календаре, я хочу, чтобы изображение зависало рядом с указателем мыши, на котором будет информация о событии, а затем исчезало, когда мышь уходит из горячей точки. У меня есть шесть точек доступа и функция javascript для каждой. Функции заменяют всплывающее изображение правильным изображением события. Ниже приведен пример только одной из областей вместе с одной функцией (остальные идентичны с разными именами изображений и координатами).

У меня появлялись изображения событий под календарем при наведении курсора, но страница отказывалась перемещать положение изображения в текущее местоположение мыши. Как я могу переместить всплывающее изображение? Что я делаю неправильно? или я должен использовать другой метод?

JS:

function pop(e) { //function called by first hotspot
        Image.src = "../img/Bubble - Aloha.png" //event image
        document.popup1.src = Image.src; 
        var thing = document.getElementById("popup1");

        $("#popup1").toggle();
        thing.style.left = e.screenX + 'px';
        thing.style.top = e.screenY + 'px';

        return true;
        }

КАРТА:

<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);"  onMouseOut="pop(event);"/>
...</map>

HTML:

<ul><li>
        <img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
    </li>
    <li>
        <div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;> 
        </div><br />Click Here To RSVP! 
    </li>
</ul>

javascript html css popup imagemap
person woodlumhoodlum    schedule 01.03.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Возможно, вместо того, чтобы манипулировать положением самого изображения, вы могли бы расположить окружающий его элемент div. Для HTML:

<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar"> 
<br />Click Here To RSVP!</div>

С некоторым CSS для div:

.popup {
        position:absolute;
        z-index:20000;
        top: 0px;
        left: 0px;
        display: none;
}

И затем JS:

function pop(e) { //function called by first hotspot

    Image.src = "../img/Bubble - Aloha.png" //event image
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup");

    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();

    return true;
 }

Обратите внимание, что я бы также использовал clientX и clientY, а не screenX и screenY:

В чем разница между screenX/Y , клиент X/Y и страница X/Y?

Рабочий пример на JSFiddle

person Simon Adcock    schedule 01.03.2013
comment
Я пробовал это раньше, и именно поэтому я изначально создал этот div. Но хороший совет по использованию clientX вместо этого, я попробовал все три и не был уверен в их различии. - person woodlumhoodlum; 02.03.2013
comment
Не волнуйтесь. Не могли бы вы заставить его работать? Я думаю, что клиент X / clientY был основным изменением, которое вам нужно, после этого код, казалось, работал отлично. - person Simon Adcock; 02.03.2013
comment
Нет, менял clientx/y, не помогло. Изображение все еще застряло внизу. - person woodlumhoodlum; 03.03.2013
comment
Конечно, вам нужно будет обновить свой JS, чтобы отображать div, а не просто изображение. Посмотрите этот JSFiddle, наведите курсор на первое число месяца: jsfiddle.net/SiCurious/CjrU4 - person Simon Adcock; 03.03.2013
comment
Ух ты! Спасибо. Кажется, это проблема с моим css, я думаю, что у меня был конфликтующий код, который не позволял position:absolute выполнять свою работу во всплывающем окне. Я ценю рабочий пример. - person woodlumhoodlum; 03.03.2013

arrow_upward
0
arrow_downward

Одна вещь, которую я сделал (в ситуации, почти такой же, как эта: клиент хотел, чтобы некоторые поля с ценами появлялись при наведении курсора на ключевое слово цены) почти полностью использует CSS и HTML. Вы можете создавать всплывающие области внутри тегов <a>, которые затем помещаются в некоторые <span> (или абсолютно позиционированные <div>), расположенные рядом с областью наведения. Убедитесь, что эти элементы span/div определены только для селектора a:hover, и установите для них значение display:none; для остальных селекторов a:x, чтобы поле span/div появлялось только при наведении указателя мыши на якорь и исчезало, когда ты не.

person L0j1k    schedule 01.03.2013
comment
Я попытался окружить всплывающий div диапазоном, но по какой-то причине я не думаю, что смог установить верхнее и левое значение, которое поместило изображение внутри изображения. Как будто это заставило его ниже календаря. Я попробую это с тегом привязки, может быть, это трюк. Или это может быть потому, что я поместил его в тег списка. Я дам вам знать, как это происходит завтра. - person woodlumhoodlum; 01.03.2013