Jump to content
  • 0

Координаты в теге AREA и масштабирование картинки-карты


GRIG
 Share

Question

Задумал для одного сайта сделать картинку-карту, по кликам на которую пользователь может увидеть разные разделы информации. Стал делать примерно так:


<img src="menu1.png" usemap="#mymap" style="width: 100%"/>
<map id="mymap" name="mymap">
<area shape="rect" coords="32,245,142,265" href="#page1">
<area shape="rect" coords="32,275,142,295" href="#page2">
....

И при этом наткнулся на неприятность: координаты активных областей карты в тегах area задаются абсолютно, а размер картинки-карты может меняться в зависимости от разрешения экрана и размеров окна броузера. Т.е. по какой-то фиксированный размер картинки я координаты подобрать могу, но при изменении размеров картинки у пользователя все эти координаты слетят нафиг.

Есть ли тут какое решение, которое учитывает этот аспект?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Только что проверил на одном из своих сайтов, где активно используется area - всё нормально с масштабированием.

Вы помимо 100% для ширины задайте явно height: auto.

Тогда я, похоже, что-то не понимаю в этом деле. height задать для какого объекта? И координаты вычислять в каких единицах?

И еще: то, что тег area работает независимо от масштабирования, - это понятно. Мне нужно, чтобы при изменении размеров картинки-карты активные области карты смещались вместе с соответствующими участками изображения. А пока что получается, что после масштабирования при клике мышой на область с надписью "page1" происходит переход на ссылку "page2" (или что-то вроде того)

Link to comment
Share on other sites

  • 0
абсолютные позиционирования

Возможно что и в позиционировании ещё дело.

У меня Firebug показывает, что на area распространяются стили, заданные для img

http://s019.radikal.ru/i610/1307/85/df0135590ff4.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy