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

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

25.03.2012, 16:58. Просмотров 8079. Ответов 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
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.03.2012, 16:58
Ответы с готовыми решениями:

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

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

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

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

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

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

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

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

Добавлено через 1 минуту
зачем?
а как иначе?
0
Heleg
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
Belyy
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 02:08  [ТС] 8
что означает
Цитата Сообщение от Heleg Посмотреть сообщение
див с
?
сделал background и png 1px -50% загружаемых картинок
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 02:52 9
Цитата Сообщение от Belyy Посмотреть сообщение
что означает
Сообщение от Heleg
див с
?
сделал background и png 1px -50% загружаемых картинок
ничего не понял, если честно
0
Belyy
1 / 1 / 1
Регистрация: 16.12.2011
Сообщений: 27
26.03.2012, 12:58  [ТС] 10
ничего не понял, если честно
карту сделал через css background-ом, за картинку <map> взял 1px картинку gif, ее же использовал для onmouseout, раньше исп. всю карту ...
0
Heleg
207 / 207 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.03.2012, 14:36 11
а что за -50%? покажи результат
0
26.03.2012, 14:36
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.03.2012, 14:36

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

Фон позади кнопки должен быть, как фон блока
Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами, скину скрины макета ...

Фон body перекрывает фон остальных элементов
Добрый день. Столкнулся с такой проблемой когда писал сss код body{ background:red;}; div...


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

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

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