Javascript, рисовать окно с текстом более <img>

Question

Я больше знаком с более простой сценой программирования для настольных компьютеров (когда дело доходит до такого рода вещей, с ней намного проще иметь дело).

У меня есть большой файл .png, который я хочуотобразить в браузере, который фактически представляет собой карту со значками, и когда пользователь наводит курсор на значок, я хочу нарисовать (предпочтительно) своего рода графическое окно (может быть другое заранее разработанное изображение) и поместить в это окно стилизованный текст (основнойdisplay).

.png должен использоваться в теге <img> с использованием <map> и <area>, поэтому о <canvas> и применимых функциях JavaScript не может быть и речи, это не работает, нес прозрачным двойным обманом (уже пробовал).

С другой стороны, почему на земле стоит такая простая задача, которую моя 8-летняя сестра может выполнять в старой IDE и Language на Windows, и я могу 'T ближе к браузеру LOL!

Answer 1

Существуют причудливые способы сделать это, используя холст или даже в качестве пользовательского слоя для карты Google, но если вам не нужны расширенные панорамирование и масштабирование, базовый HTML должен подойти.

Что бы я сделал:

• Показать большое изображение в теге img

• Поместите его в div контейнер с position: relative

• Поместите каждый значок на карту с абсолютным позиционированием, например, position: absolute; left: 100px; top: 100px

• Свяжите каждое событие onclick каждого значка с jQuery UI диалогом .

Грубый пример CSS:

div.map { position: relative; width: 400px; height: 400px }
div.map .marker1 { position: absolute; left: 100px; top: 120px }

HTML:

<div class="map">
  <img src="image.png">

  <img class="marker1" onclick="$( '#dialog' ).dialog();" src="marker.png">

</div> 

<!-- jQuery UI dialog -->

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. 
       The dialog window can be moved, resized and closed with the 'x' icon.</p>
 </div>

Answer 2

Проверьте этот вопрос о канвальте эквивалент изображения карты .Из ответов, особенно эта ссылка , кажется, содержит ответ, хотя с холстом и javascript (который вы не могли получить работу).

Вы также можете найти Марка ПилигримаВведение в HTML5 Canvas полезно, особенно его живой пример, поскольку он рисует изображения и текст на холсте и обрабатывает очень точные щелчки.