Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/48: Рейтинг темы: голосов - 48, средняя оценка - 5.00
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
1

фон <map><area ... >

25.03.2012, 16:58. Просмотров 9063. Ответов 10
Метки нет (Все метки)

Есть карта:

HTML5
1
2
3
4
5
6
7
<img src="прозрачная.png" usemap ="#map" width="600" height="400" alt="карта">
<map name="map" id="map">
<area shape="poly" coords="1,1, 300,1, 300,200, 1,200, 1,1" >
<area shape="poly" coords="300,1, 600,1, 600,200, 300,200, 300,1" >
<area shape="poly" coords="1,200, 300,200, 300,400, 1,400, 1,200" >
<area shape="poly" coords="300,200, 600,200, 600,400, 300,400, 300,200" >
</map>
1. Как сделать <area> фон, что бы кусок карты стал цветным, а не прозрачным.
2. Как сделать, что бы при наведении на <area>, <area> меняло цвет.

Интересует есть ли решение без картинок( с помощью background ), если нет, то с картинками.

Буду благодарен даже за легкие намеки по данной теме ...
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.03.2012, 16:58
Ответы с готовыми решениями:

Как для html map area в форме звезды сделать тень при наведение на area?
Как для html map area в форме звезды сделать тень при наведение на area?

Тег area в map
Здравствуйте, может кто знает... как задать area цвет... или это вообще невозможно?? Вот код где...

<area> и <map>! как часто используете?
О таких тегах как &lt;area&gt; и &lt;map&gt; знаю давно, но по неизвестным даже мне причинам я ими ни разу не...

Как убрать рамку с area и map
Есть сайт, на нём решил использовать map Но вот в чём незадача, в IE лезет рамка, пытался...

10
32 / 30 / 1
Регистрация: 08.03.2012
Сообщений: 96
25.03.2012, 20:37 2
Используйте div.. Если можете сделать кусок прозрачным - подложите под него цветную картинку такую же.. На мой взгляд проще сделать две картинки черно-белую и цветную.. Нарезать и собрать в дивах.. Фон цветной картинкой.. А поверху - винегрет из дивов с черно-белыми обрезками.. При наведении див скрывается, за счет z-index или display:none или еще как то.. Было бы понятнее если бы предоставили картиночку..
А чтоб тыщу разных картинок сервер не замучался тянуть, можно заделать все на спрайтах..
0
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 00:27 3
нужна именно карта изображений или просто подсвечивающиеся области?
0
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 00:47  [ТС] 4
как на torg ua ...

Добавлено через 1 минуту
я сделал через onmouseover onmouseout, но приходиться каждый раз подгружать большую картинку ...
0
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 00:54 5
ну короче стили к area не применяются, а всю работу на себя берет javascript

Добавлено через 5 минут
Цитата Сообщение от Belyy Посмотреть сообщение
но приходиться каждый раз подгружать большую картинку ...
зачем?
0
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 00:55  [ТС] 6
в javascript писать функцию, которая на карту Украины налаживает область в определенных координатах ?

Добавлено через 1 минуту
зачем?
а как иначе?
0
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 01:53 7
Цитата Сообщение от Belyy Посмотреть сообщение
в javascript писать функцию, которая на карту Украины налаживает область в определенных координатах ?
думаю, да. но я в javascript не силен, не знаю как подсвечивать. есть вариант с созданием svg'шечки поверх рисунка, тогда ничего подгружать не надо будет. это первое, что в голову пришло

Добавлено через 7 минут
опять же, там под картинкой background, а поверх его однопиксельный прозрачный gif растянутый на весть блок...

Добавлено через 35 секунд
точнее, там даже нет никакой картинки, только background

Добавлено через 46 минут
в принципе ничего особенного. div с background'ом в виде карты, поверх див с на котором меняется background-image в зависимости от позиции мыши на диве поверх него. не очень умно, если динамичные изображения подгружаются с сервера... если они создаются скриптом, то это круто...
1
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 02:08  [ТС] 8
что означает
Цитата Сообщение от Heleg Посмотреть сообщение
див с
?
сделал background и png 1px -50% загружаемых картинок
0
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 02:52 9
Цитата Сообщение от Belyy Посмотреть сообщение
что означает
Сообщение от Heleg
див с
?
сделал background и png 1px -50% загружаемых картинок
ничего не понял, если честно
0
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 12:58  [ТС] 10
ничего не понял, если честно
карту сделал через css background-ом, за картинку <map> взял 1px картинку gif, ее же использовал для onmouseout, раньше исп. всю карту ...
0
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 14:36 11
а что за -50%? покажи результат
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.03.2012, 14:36

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Сгенерировать случайную точку, принадлежащую полигонув map area
Задание: сгенерировать случайную точку, которая бы лежала внутри полигона area с заданными...

Близкостоящие полигоны(сложная верстка) или как применить MAP Area?
Здравствуйте, столкнулся с таким вот дизайном Дело в том, что блоки многоугольников залезают...

Появление div при наведении на area в map-е
Имеется карта map, на ней обозначены области area &lt;div class=&quot;map&quot; align=&quot;center&quot;&gt; &lt;img...

теги map и area. Создание всплывающей картинки
Написал код, который позволяет при наведении на area выводить всплывающую картинку. Не получается...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.