Бордюр у <area> - Веб-программирование

Face · 05.07.2006, 21:59

Есть что-то вроде такого кода:

Код HTML:

<img src="some.jpg" border=0 usemap="#map1" width=616 height=308>
<map name="map1">
<area shape="poly" coords="140,70,166,73,186,79,188,59,175,54,143,50" href="link.php" alt="Ссылка">
</map>

Можно ли сделать так, чтобы при наведении курсора на эту область со ссылкой, она начала бы иметь бордюр (например как при border=1)?

Hatifnatt · 05.07.2006, 23:44

Face
Как сделать подобное с помощь CSS читай
тут (пример того что получиться)
и еще
тут, тут и тут еще

PS а ваще CSS рулит в умелых руках!
PPS все выше приведенные примеры кросс браузерные

Face · 06.07.2006, 11:19

Hatifnatt
Мне нужно, чтобы область была не прямоугольной, а произвольной формы, например как в первом посте... Можно ли сделать это средствами CSS?

Hatifnatt · 06.07.2006, 11:56

Теми методами что выше нельзя, можешь попробовать задать у area свойство border с помощью CSS возможно получиться.

Face · 06.07.2006, 19:23

При "style='border:1px red solid'" не получается

Face · 18.07.2006, 12:02

Проблему прорисовки границы решил используя <canvas> - http://developer.mozilla.org/en/docs/Canvas_tutorial

Hatifnatt · 18.07.2006, 13:51

Face но поддерживается это (тег canvas) только Safari или Firefox 1.5+ так что это не универсальное решение ... к сожалению.

Face · 18.07.2006, 16:34

Hatifnatt Еще поддерживается Opera 9... А для IE Google выпустило js-библиотеку ExCanvas: http://excanvas.sourceforge.net/ С ней хоть и тормознуто, но работает

Hatifnatt · 18.07.2006, 17:17

Google то может библиотеку и выпустило тока у кого она установлена? Практически ни у кого, так что можно считать что ее нет. Хотя сейчас народ переходит на броузеры сторонних разработчиков, тем не мение большая часть пользуется IE а когда выдет 7 версия ваще неизвестно что будет. Посему к сожалению пока что это не кросс-браузерное решение.

Sam Dark · 18.07.2006, 17:39

Можно с помощью того-же CSS подгружать PNG как фон. Или же замутить с помощью CSS скруглённые углы как на CSS Playground.

Face · 18.07.2006, 17:55

Hatifnatt ты не так понял... Чтобы подключить библиотеку надо вписать в код страницы:

Код HTML:

<script type="text/javascript" src="templates/excanvas.js"></script>

Sam Dark Мне необходимо было, чтобы по определенным координатам строилась ломаная кривая.

Пример использования canvas - http://hermit.territory.ru/?mod=map хоть там еще и криво все, но более-менее работает

Попробовал поставить себе IE 7 Beta 3 - canvas там не поддерживается

Sam Dark · 19.07.2006, 09:06

См. http://www.stunicholls.myby.co.uk/, может наткнёшься на то, что нужно.

Hubbitus · 19.07.2006, 10:54

Для рисования на JavaScript есть очень неплохая кроссбраузерная библиотечка http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

aoxyz_30330 · 22.07.2006, 19:22

мда ... наверное самое верное решение пока - порезать ето дело и делать предварительную подгрузку изображений ... яваскрипт ето в любом случае ненадёжное решение ... а ещё луче использовать флеш или яву .. ето установлено на 99 процентов компов ...

Face · 22.07.2006, 20:28

aoxyz_30330, конечно это самое лучшее решение... но дело в том что карта ссылок постоянно меняется и каждый раз резать смысла нет

05.07.2006, 21:59	# 1
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	Бордюр у <area> Есть что-то вроде такого кода: Код HTML: <img src="some.jpg" border=0 usemap="#map1" width=616 height=308> <map name="map1"> <area shape="poly" coords="140,70,166,73,186,79,188,59,175,54,143,50" href="link.php" alt="Ссылка"> </map> Можно ли сделать так, чтобы при наведении курсора на эту область со ссылкой, она начала бы иметь бордюр (например как при border=1)?

05.07.2006, 23:44	# 2
Hatifnatt ::VIP:: Регистрация: 23.05.2005 Пол: Male Сообщения: 1 064	Face Как сделать подобное с помощь CSS читай тут (пример того что получиться) и еще тут, тут и тут еще PS а ваще CSS рулит в умелых руках! PPS все выше приведенные примеры кросс браузерные __________________ Умный не тот кто все знает, а тот кто знает где узнать то чего он не знает. Life is only what you make it. Последний раз редактировалось Hatifnatt; 05.07.2006 в 23:46.

06.07.2006, 11:56	# 4
Hatifnatt ::VIP:: Регистрация: 23.05.2005 Пол: Male Сообщения: 1 064	Теми методами что выше нельзя, можешь попробовать задать у area свойство border с помощью CSS возможно получиться. __________________ Умный не тот кто все знает, а тот кто знает где узнать то чего он не знает. Life is only what you make it.

18.07.2006, 13:51	# 7
Hatifnatt ::VIP:: Регистрация: 23.05.2005 Пол: Male Сообщения: 1 064	Face но поддерживается это (тег canvas) только Safari или Firefox 1.5+ так что это не универсальное решение ... к сожалению. __________________ Умный не тот кто все знает, а тот кто знает где узнать то чего он не знает. Life is only what you make it.

18.07.2006, 17:17	# 9
Hatifnatt ::VIP:: Регистрация: 23.05.2005 Пол: Male Сообщения: 1 064	Google то может библиотеку и выпустило тока у кого она установлена? Практически ни у кого, так что можно считать что ее нет. Хотя сейчас народ переходит на броузеры сторонних разработчиков, тем не мение большая часть пользуется IE а когда выдет 7 версия ваще неизвестно что будет. Посему к сожалению пока что это не кросс-браузерное решение. __________________ Умный не тот кто все знает, а тот кто знает где узнать то чего он не знает. Life is only what you make it.

06.07.2006, 11:19	# 3
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	Hatifnatt Мне нужно, чтобы область была не прямоугольной, а произвольной формы, например как в первом посте... Можно ли сделать это средствами CSS?

06.07.2006, 19:23	# 5
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	При "style='border:1px red solid'" не получается

18.07.2006, 12:02	# 6
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	Проблему прорисовки границы решил используя <canvas> - http://developer.mozilla.org/en/docs/Canvas_tutorial

18.07.2006, 16:34	# 8
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	Hatifnatt Еще поддерживается Opera 9... А для IE Google выпустило js-библиотеку ExCanvas: http://excanvas.sourceforge.net/ С ней хоть и тормознуто, но работает

18.07.2006, 17:39	# 10
Sam Dark Member Регистрация: 03.07.2003 Адрес: Voronezh, Russia Пол: Male Сообщения: 294	Можно с помощью того-же CSS подгружать PNG как фон. Или же замутить с помощью CSS скруглённые углы как на CSS Playground. __________________ Это жжжж неспроста...

18.07.2006, 17:55	# 11
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	Hatifnatt ты не так понял... Чтобы подключить библиотеку надо вписать в код страницы: Код HTML: <script type="text/javascript" src="templates/excanvas.js"></script> Sam Dark Мне необходимо было, чтобы по определенным координатам строилась ломаная кривая. Пример использования canvas - http://hermit.territory.ru/?mod=map хоть там еще и криво все, но более-менее работает Попробовал поставить себе IE 7 Beta 3 - canvas там не поддерживается Последний раз редактировалось Face; 18.07.2006 в 21:57.

19.07.2006, 09:06	# 12
Sam Dark Member Регистрация: 03.07.2003 Адрес: Voronezh, Russia Пол: Male Сообщения: 294	См. http://www.stunicholls.myby.co.uk/, может наткнёшься на то, что нужно. __________________ Это жжжж неспроста...

19.07.2006, 10:54	# 13
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Для рисования на JavaScript есть очень неплохая кроссбраузерная библиотечка http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

22.07.2006, 19:22	# 14
aoxyz_30330 Junior Member Регистрация: 22.05.2004 Сообщения: 112	мда ... наверное самое верное решение пока - порезать ето дело и делать предварительную подгрузку изображений ... яваскрипт ето в любом случае ненадёжное решение ... а ещё луче использовать флеш или яву .. ето установлено на 99 процентов компов ...

22.07.2006, 20:28	# 15
Face Junior Member Регистрация: 09.08.2005 Адрес: Свердловская область Сообщения: 112	aoxyz_30330, конечно это самое лучшее решение... но дело в том что карта ссылок постоянно меняется и каждый раз резать смысла нет