IMG MAP AREA - координаты в процентах

DarkDaemon · October 1, 2010

Нужна интерактивная МАСШТАБИРУЕМАЯ картинка на весь экран. Хочу сделать с помощью тэга area. Всё бы ничего, да вот при масштабировании регионы уползают кто куда Вроде бы можно указывать координаты в процентах, но ни в IE, ни в Opera данный код не работает У кого какие есть соображения?

<img src=bg.jpg width="100%" border="0" usemap="#Map"/>
<map name="Map">
  <area shape="rect" coords="0%, 0%, 50%, 100%" href="#" alt="zone1">
</map>

stars · October 2, 2010

про проценты слышу в первые...

Насчет масштабирования... Ну у меня идея одна сделать как на яндексе карты, поделить масштабирование на несколько шагов сделать картинки на всех шагах масштабирования, и собственно использовать JS+AJAX работа не на пять минут, но не каких супер навороченных скриптов не требует, или обойтись без JS а использовать php и перезагрузки страницы

DarkDaemon · October 2, 2010

про проценты слышу в первые...
Насчет масштабирования... Ну у меня идея одна сделать как на яндексе карты, поделить масштабирование на несколько шагов сделать картинки на всех шагах масштабирования, и собственно использовать JS+AJAX работа не на пять минут, но не каких супер навороченных скриптов не требует, или обойтись без JS а использовать php и перезагрузки страницы

Большое спасибо за ответ. Попробую сделать только на JavaScript, идея такая: при загрузке страницы он будет определять ее ширину, и в зависимости от ширины выдавать картинку, например: при ширине экрана от 800 до 1024 пикселей картинка будет 800х600 с одной MAP, при ширине экрана от 1024 до 1280 пикселей картинка будет 1024х768 с другой MAP и так далее

Вот за 20 минут состряпал:

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var width = (window.innerWidth)?window.innerWidth: ((document.all)?document.body.offsetWidth:null);
if (width > 0 && width < 800) {
document.write("<img src=bg1.jpg border='0' usemap='#Map1'/>")
} 
if (width > 799 && width < 1024) {
document.write("<img src=bg2.jpg border='0' usemap='#Map2'/>")
}
if (width > 1023 && width < 1280) {
document.write("<img src=bg3.jpg border='0' usemap='#Map3'/>")
}
if (width > 1279 && width < 1366) {
document.write("<img src=bg4.jpg border='0' usemap='#Map4'/>")
}
if (width > 1365 && width < 1440) {
document.write("<img src=bg5.jpg border='0' usemap='#Map5'/>")
}
if (width > 1439 && width < 1600) {
document.write("<img src=bg6.jpg border='0' usemap='#Map6'/>")
}
if (width > 1599 && width < 1680) {
document.write("<img src=bg7.jpg border='0' usemap='#Map7'/>")
}
if (width > 1679 && width < 1920) {
document.write("<img src=bg8.jpg border='0' usemap='#Map8'/>")
}
if (width > 1919) {
document.write("<img src=bg9.jpg border='0' usemap='#Map9'/>")
}
if (width = 0) {
document.writeln('Здесь должна быть картинка')
}
</script> 
</body>
</html>

Edited October 2, 2010 by DarkDaemon

SelenIT · October 2, 2010

А на map свет точно клином сошелся? Варианты с абсолютно позиционированными обычными ссылками (с display:block) или вообще с одной флешкой не рассматриваются?

DarkDaemon · October 2, 2010

Немного подумав, что код будет не универсальным и громоздким, решил сделать проще - теперь JavaScript создает MAP к картинке, осталось только ввести проценты

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var width = (window.innerWidth)?window.innerWidth: ((document.all)?document.body.offsetWidth:null);
var height = (window.innerHeight)?window.innerHeight: ((document.all)?document.body.offsetHeight:null);
if (width > 0 && height > 0) {
document.write("<map name='Map'>")
document.write("<area shape='rect' coords='" + width*0.25 + "," + height*0.25 + "," + width*0.75 + "," + height*0.75 + "' href='#' alt='zone1'>")
document.write("</map>")
document.write("<img src=bg.jpg width='100%' border='0' usemap='#Map'/>")
}
if (width = 0) {
document.writeln('Здесь должна быть картинка')
}
</script>
</body>
</html>

А на map свет точно клином сошелся? Варианты с абсолютно позиционированными обычными ссылками (с display:block) или вообще с одной флешкой не рассматриваются?

Во флеше рисовать не умею, да и хочется сделать страницу, работающую без флеша. С абсолютно позиционированными ссылками не работал, но думается, что "оживить" элементы в картинке будет проще с MAP? Сейчас погуглил про абсолютное позиционирование - мне кажется, что оно именно в моем случае не поможет, т.к. формы "объектов-ссылок" в этой картинке очень сложные, их придется описывать полилиниями. Или я не прав?

Edited October 2, 2010 by DarkDaemon

SelenIT · October 2, 2010

Если формы действительно сложные - то да, абсолютным позиционированием отделаться будет сложно. Меня сбил пример с прямоугольной областью.

Тогда, пожалуй, действительно только JS. Только вариант с проверкой document.all меня смущает (да, в мозилловых сработает window.innerWidth, но всё равно как-то не внушает доверия). Я бы, пожалуй, сделал так: изначально поставил картинку и разметил области с минимально поддерживаемым размером (чтобы и при отключенном скрипте хоть что-то работало), а по загрузке страницы поменял бы ее ширину на 100%, заново померил бы ее и затем прошелся циклом по всем <area>, умножая все координаты на отношение новой ширины к изначальной...

Int · October 2, 2010

Ну map-то может обраатываться и на серверной стороне, так что можно даже без js

Sign In

IMG MAP AREA - координаты в процентах

Question

DarkDaemon

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

stars

Link to comment

Share on other sites

DarkDaemon

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

DarkDaemon

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information