map и position

jurassik · October 31, 2012

имеем изображение (img), карту к ней (map) и слой (div), который это все перекрывает

<!DOCTYPE html> 
<html lang="ru">
<head>
<meta charset="utf-8" />
<style>
div{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:2;
}
img {
	position:relative;
	z-index:1;
}
</style>
</head>

<body>

<div></div>

<img src="http://img0.liveinternet.ru/images/attach/b/3/14/8/14008201_hm4_1_30_0_big.jpg" width="450px" height="450px" usemap="#map" />

<map name="map" id="map">
	<area href="#" shape="poly" coords="50,50,400,50,400,400,50,400" title="hover" />
</map>

</body>
</html>

по идеи слой div выше тега img

и при наведении на черную область ничего не происходит.

однако в браузерах ие 7,8,9 свойство z-index не срабатывает

Great Rash · October 31, 2012

Вы что-то типа модального окна делаете? В ИЕ z-index на таких элементах может и не сработать. Как вариант можно попробовать прятать <map> через display: none, пока <div> активен.

jurassik · October 31, 2012

Вы что-то типа модального окна делаете? В ИЕ z-index на таких элементах может и не сработать. Как вариант можно попробовать прятать <map> через display: none, пока <div> активен.

нет, не модальное окно, http://viteks.jino.ru/map.html

map - display: none не даст результат ни в одном браузере, области area будет активны

а если скрывать img то схлопывается контекстная часть (там окромя картинки ничего нет).

наверно придется через квери родителю задавать размеры изображения, а само изображение скрывать

Great Rash · October 31, 2012

Тогда не понятно для чего вам необходимо накрывать карту сверху дивом.

jurassik · October 31, 2012

Тогда не понятно для чего вам необходимо накрывать карту сверху дивом.

справа маленькая карта, при клике перемещается фон, и если сразу навести в центр окна где расположены area то соответственно область area подсветить, т.е. подсветит область которая еще "не приехала"

собственно мои мотивации тут не важны, вопрос был про позиционирование тега map в ие

Great Rash · October 31, 2012

Сам тег <map> никак не позиционируется. Вы его можете разместить вообще где угодно на странице, хотите ставьте в самом низу (я так и делаю обычно), а хотите вверху. Т.е. тег <map> лишь указывает браузеру где разместить кликабельные области. Поэтому вы можете с ним извращаться вообще как хотите, но от этого ничего не изменится.

Поэтому я предлагаю вам иное решение, а именно отключать действие тега, в то время, когда он вам не нужен (когда над картой <div>). Я почему-то думал, что если ставить ему display: none; то действие <map> отменится. Как видно это не помогает. Чтож, попробуйте иной похожий способ (например изменение name у картинки).

Sign In

map и position

Question

jurassik

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

jurassik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

jurassik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information