Всплывающее окно с изображением карты при переходе с всплывающего текста из базы данных - PullRequest
Новая
       13

Всплывающее окно с изображением карты при переходе с всплывающего текста из базы данных

1 голос
/ 13 мая 2010

У меня есть пользовательская карта США с примерно 20 полигональными горячими точками. Я хотел бы, чтобы рядом с каждой горячей точкой при наведении всплывающее окно, с текстом и ссылками, взятыми из моей базы данных, в зависимости от местоположения. Я бы подумал, что это обычная ситуация, но я не могу найти решение, которое работает. Я попытался использовать asp: imagemap и расширитель всплывающих окон ajax, но вы не можете назначить идентификаторы для горячих точек, и он не поддерживает события наведения мыши. Я пробовал css с html-картой изображений, но я не могу понять, как использовать решения css с многоугольными горячими точками, и я также не знаю, как связать его, чтобы получить данные из БД без целей asp (я не очень знаком с jquery, который бы работал, я думаю). Кто-нибудь знает какие-нибудь простые решения?

Ответы [ 2 ]

2 голосов
/ 13 мая 2010

Я не понимаю, почему это отличается от создания всплывающего окна в любом другом контексте. Есть несколько способов прикрепить «данные» к элементу area. Самое простое, что я могу придумать, это использовать атрибут alt.

Проверьте это демо например. (Код ниже.)

HTML 

<body>
<p>Hover on the sun or on one of the planets to get its info:</p>
<div id="map">
    <div id="overlay"></div>
    <img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" />
    <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" />
    <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" />
</map>
</body>​

JS 

$('area').each(function(){
    var area = $(this),
        alt = area.attr('alt');
    area.mouseenter(function(){
        $('#overlay').html(alt);
    }).mouseleave(function(){
        $('#overlay').html('');
    });
});​

CSS 

#map {
    position: relative;
}
#overlay {
    position: absolute;
    background: #000;
    color: #fff;
    top: 20px;
    left: 20px;
}

Нет вызовов AJAX, но их можно легко добавить к событиям mouseenter и mouseleave каждого элемента area.

0 голосов
/ 13 мая 2010

Для этого требуется решение javascript (с данными, конечно, предоставляемыми на стороне сервера). Вы уже видели Использование JQuery hover с HTML-картой изображений , чтобы начать работу?

На самом деле предоставленный ответ содержит ссылку на http://plugins.jquery.com/project/maphilight и демонстрацию на http://davidlynch.org/js/maphilight/docs/demo_usa.html. Это не совсем то, что вы ищете, но оно близко.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...