Помогите с подстветкой area?

[Zaharov]

На большой картинке выделил область (area) в качестве ссылки на другой документ html:

<img src="image.jpg" usemap="#karta">

<map name="karta">

<area href="doc2.html" shape="rect" coords="50,60,70,80">

</map>

Как сделать так, чтобы при наведении курсора мышки на эту область выделялись (подсвечивались) ее контуры?

Что-то вроде этого необходимо:

<div id="qaz" onmouseover="this.style.borderColor='orange'" onmouseout="this.style.borderColor='black'">

</div>

CSS:

#qaz {border:6px solid black;}

Проблема в том, что у area нет этого самого border.

Как еще можно отобразить контуры выделенной области?

[rash]

Если область прямоугольная - разместите поверх нее просто блочную абсолютно спозиционированную ссылку, которой и задавайте границу при наведении мыши.

[Zaharov]

Если область прямоугольная - разместите поверх нее просто блочную абсолютно спозиционированную ссылку, которой и задавайте границу при наведении мыши.

Областей на самом деле несколько и есть ломанные.

[rash]

Областей на самом деле несколько и есть ломанные.

Тогда, боюсь, вам флеш нужен...

[SelenIT]

Или canvas...

[rash]

Или canvas...

Но его придется эмулировать в IE, что нельзя назвать большим удовольствием :-)

[SelenIT]

Есть готовые эмуляции, в примере по ссылке как раз используется одна из них (eCanvas). Имхо, жить можно

[titaniMOZG]

А что если...

Сверху, мы карту изображения присваиваем для прозрачного гифа, а в ксс для него же присваиваем бекграунд, который можем позиционировать через background-position, в зависимости от области, куда наведен курсор. А если мы можем позиционировать фоновый рисунок, тогда на нем можем нарисовать что угодно.

Я многие графические менюшки на сайтах позиционирую фоном. Например:

http://rumas.ru/templates/rumas/img/menu.jpg - картинка

http://www.rumas.ru - как это выглядит на практике.

Можно фоновым рисунком нарисовать все нужные выделения, и в зависимости от того, на что мы наводим, у нас задаются для фонового изображения те или иные координаты.

[Zaharov]

А что если...

Сверху, мы карту изображения присваиваем для прозрачного гифа, а в ксс для него же присваиваем бекграунд, который можем позиционировать через background-position, в зависимости от области, куда наведен курсор. А если мы можем позиционировать фоновый рисунок, тогда на нем можем нарисовать что угодно.

Я многие графические менюшки на сайтах позиционирую фоном. Например:

http://rumas.ru/templates/rumas/img/menu.jpg - картинка

http://www.rumas.ru - как это выглядит на практике.

Можно фоновым рисунком нарисовать все нужные выделения, и в зависимости от того, на что мы наводим, у нас задаются для фонового изображения те или иные координаты.

Пожалуй так и сделаю. Сам к чему-то подобному потихоньку склонялся, но надеялся, что есть более простое и прямолинейное решение, без ухищрений.

P.S. Canvas, походу, похожий путь предлагает, но до канваса у меня еще руки не дошли разобраться, что это такое.