Выделение областей картинки

[Ekseithne]

Имеется картинка большого разрешения, которая будет разбита на маленькие участки, т.е. зоны. Задумка такая: при наведение мыши на опр. зону, будет появляться небольшой текст, который задерживается на несколько секунд (вроде как описание какой-то кнопки, которое часто используется на веб-страницах). Я однажды использовала это на конкурсной веб-страничке для описания каждой фотографии, но там-то все гораздо проще, здесь картинка-то одна.
Объясните, пожалуйста, как это сделать, буду очень благодарна.

 

[Erenion]

http://www.chebot.ru/tegs/area/
http://www.chebot.ru/tegs/map/

используется совместно (несколько area вложены в один map)
Там даже картинка как пример есть (с двумя областями, при наведении на который появляется подсказка). Используйте alt в теге <area> короче

 

[Ekseithne]

Erenion, спасибо огромнейшее! Все понятно расписано, я даже поняла все.

 

[Trotil]

Ekseithne
Только вот, в FireFox подсказка не отображается.

Как тебе такой пример: http://guimc.ru/1/1.html
При наведении на область 1 подсказка сохраняется, а при наведении на область 2 - исчезает.
Исходник взят отсюда: http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

Если устраивает, могу подробней объяснить, как эту штуку подключить.

 

[Ekseithne]

Trotil,

Если устраивает, могу подробней объяснить, как эту штуку подключить.

Да, пожалуйста, если можешь, первый вариант (область 1, подсказка сохраняется).

 

[Trotil]

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

<map name="test"><area href="http://www.chebot.ru/tegs/area/1.html" alt="первая область" shape="rect" coords="0,0,100,130" [B]onmouseover="stm(Text[0],Style[12])" onmouseout="htm()"[/B]>

Описание массивов Text и Style есть в архиве... А проще использовать готовые, уже определенные в style.js.

 

[Ekseithne]

Trotil, ага, все понятно, спасибо за помощь!

 

[Trotil]

Очень интересные трюки с <area>: с помощью CSS:
тут (пример того что получится)
и еще
тут, тут и тут еще

PS все выше приведенные примеры кроссбраузерные

 

[НиВа4е]

А нет ли вот этого:

Очень интересные трюки с <area>: с помощью CSS:
тут (пример того что получится)

Но на русском?

 

[Trotil]

Вариант N1: translate.ru
Вариант N2: Посмотреть исходный текст, и сделать также, как и там. Эта штука сделана на чистом CSS, больше никаких премудростей в коде не обнаружено. (подкрепить знания по CSS можно на Интуите - общие сведения CSS и CSS2, а также сухонькая спецификация CSS2)