Всплывающее окно карты изображения на трансформации, с раскрывающимся текстом, оттянутым из базы данных

Question

Всплывающее окно карты изображения на трансформации, с раскрывающимся текстом, оттянутым из базы данных

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

1

asp.net jquery ajax popup

задан lbholland 13 May 2010 в 00:16

2 ответа

Другие вопросы по тегам:

asp.net jquery ajax popup

Похожие вопросы:

score 2 · Answer 1

Я не понимаю, чем это отличается от создания всплывающего окна в любом другом контексте. Есть несколько способов прикрепить «данные» к элементу области . Самое простое, что я могу придумать, - это использовать атрибут 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 для каждый элемент области .

score 0 · Answer 2

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

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

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