HTML-картирование изображений

Question

Возможно ли включить вид прозрачной коробки с картой изображений? Люди наводили бы на них указатель мыши, чтобы отобразить коробку, в которой может содержаться контент внутри?

Я думал об этом раньше, но не знал, как это сделать.

Answer 1

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

Вы также можете установить идентификатор для определенных областей и на фоне набора папок на все, что захотите. (Не пробовал, но просто подумал)

Answer 2

Вот простой пример. Это выделяет окно, поэтому просто отредактируйте CSS, чтобы скрыть/показать/разместить его. Я использовал элемент данных «data-» HTML5 для хранения данных, которые используются для идентификации соответствующего элемента в обработчике событий.

<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0"> 

<map id="map1" name="demo"> 
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" /> 
</map> 

<div id="a">Info goes here</div> 

CSS:

.active { 
    border:2px solid #ff0000 
} 

JS:

$('#map1 area').on('mouseover',function() { 
    var target = $(this).data('element'); 
    $("#" + target).addClass('active'); 
}) 
$('#map1 area').on('mouseout',function() { 
    var target = $(this).data('element'); 
    $("#" + target).removeClass('active'); 
})