Стили для area

12
P
На сайте с 10.03.2008
Offline
168
1581

Не очень силен в верстке.

Есть картинка, на ней обозначены точки, при клике на которые происходит некое действие JavaScript (checkpoint):


<area shape="circle" coords="418,397,6" onclick="checkpoint(66, 1);" title="Кликните">

Как видите, чел сможет узнать, что он навел на нужную область только по title, я же хочу, чтобы:

1) При наведении на нужную область, курсор менялся на cursor: pointer;. Что-то вроде style="cursor: pointer;", но не работает.

2) При клике, эта область как-то подсвечивалась, чтобы чел знал, что он уже по ней кликал. Что-то вроде onclick="this.style.backgroundColor='#000000'", но, опять же, не работает для этого тега.

Буду благодарен за помощь.

ewg777
На сайте с 04.06.2007
Offline
225
#1

Не сработает.

Объекта, как такового в этой ситуации нет.
P
На сайте с 10.03.2008
Offline
168
#2

ewg777, спасибо, но увы, нет, не срабатывает. Вообще никакие стили не применяются ни в каком виде. Где-то видел реализацию подобного, не не помню где :( Пойду искать.

T.R.O.N
На сайте с 18.05.2004
Offline
314
#3
pistol:
this.style

Понимаете, объекта, как такового в этой ситуации нет. Курсор нужно менять на уровне body или картинки. Попробуйте изменить курсор, обратившись по ID к картинке, на которую наложена карта.

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
P
На сайте с 10.03.2008
Offline
168
#4
T.R.O.N:
Понимаете, объекта, как такового в этой ситуации нет. Курсор нужно менять на уровне body или картинки. Попробуйте изменить курсор, обратившись по ID к картинке, на которую наложена карта.

Отлично, везде, кроме оперы работает:

onMouseOver="document.getElementById('mapimg').style.cursor = 'pointer';" onMouseOut="document.getElementById('mapimg').style.cursor = 'default';"

В опере событие onMouseOut срабатывает (проверял алертом), но стиль так и остается поинтером, может не default надо ставить для оперы?

А если нет объекта как такового, данную точку по нажатию не выделить никак не удастся? Хоть фоном, хоть бордером?

[Удален]
#5

pistol, в принципе у вас есть координаты нужной области (coords="418,397,6") , следовательно можно спокойно создать полупрозрачный gif и разместить его над изображением

и кстати я бы вынес обработчик события из html кода в отдельный js файл,

да и еще возможно стоит поиграть с <!DOCTYPE>

T.R.O.N
На сайте с 18.05.2004
Offline
314
#6

просто укажите .style.cursor = "";

pistol:
А если нет объекта как такового, данную точку по нажатию не выделить никак не удастся? Хоть фоном, хоть бордером?

Здесь только подстановкой, как говорит burunduk

И еще, мне кажется что для area параметр href="url" является обязательным, и тогда появится указатель и так, как и бордюр области

P
На сайте с 10.03.2008
Offline
168
#7
T.R.O.N:
И еще, мне кажется что для area параметр href="url" является обязательным, и тогда появится указатель и так, как и бордюр области

Вот то, что я искал - простое решение, которое не видно с 1 взгляда. Спасибо - работает :)

burunduk:
создать полупрозрачный gif и разместить его над изображением

На карте 200 областей - точек. Похоже, придется перехватывать координаты клика и ставить туда adsolute div с картинкой - кругляшком :(

T.R.O.N
На сайте с 18.05.2004
Offline
314
#8
pistol:
Похоже, придется перехватывать координаты клика и ставить туда adsolute div с картинкой - кругляшком

попробуйте у ссылки в стилях включить бордюры

P
На сайте с 10.03.2008
Offline
168
#9
T.R.O.N:
попробуйте у ссылки в стилях включить бордюры

a:hover { border: 1px solid red; }? Мне нужно, чтобы при клике, область, по которой кликнули, как-то выделялась от тех, на которые не кликнули. Для наглядности, карта метро:

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

pistol добавил 14.12.2009 в 17:26

Вобщем, юзер кликает по станциям, выбранные им станции (названия) добавляются в форму ниже картинки. Потом форма отправляется. Вот такая цель карты.

[Удален]
#10

pistol, а для чего использовать area ?

не проще ли карту использовать как фоновый рисунок div внутри которого находятся куча img

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий