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

@Belyy · Регистрация: 16.12.2011

Студворк — интернет-сервис помощи студентам

Есть карта:

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 ), если нет, то с картинками.

Буду благодарен даже за легкие намеки по данной теме ...

@Lane · 25.03.2012, 20:37

Используйте div.. Если можете сделать кусок прозрачным - подложите под него цветную картинку такую же.. На мой взгляд проще сделать две картинки черно-белую и цветную.. Нарезать и собрать в дивах.. Фон цветной картинкой.. А поверху - винегрет из дивов с черно-белыми обрезками.. При наведении див скрывается, за счет z-index или display:none или еще как то.. Было бы понятнее если бы предоставили картиночку..
А чтоб тыщу разных картинок сервер не замучался тянуть, можно заделать все на спрайтах..

@Heleg · 26.03.2012, 00:27

нужна именно карта изображений или просто подсвечивающиеся области?

@Belyy · 26.03.2012, 00:47 **[ТС]**

как на torg ua ...

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

@Heleg · 26.03.2012, 00:54

ну короче стили к area не применяются, а всю работу на себя берет javascript

Добавлено через 5 минут

Сообщение от Belyy

но приходиться каждый раз подгружать большую картинку ...

зачем?

@Belyy · 26.03.2012, 00:55 **[ТС]**

в javascript писать функцию, которая на карту Украины налаживает область в определенных координатах ?

Добавлено через 1 минуту

зачем?

а как иначе?

@Heleg · 26.03.2012, 01:53

Сообщение от Belyy

в javascript писать функцию, которая на карту Украины налаживает область в определенных координатах ?

думаю, да. но я в javascript не силен, не знаю как подсвечивать. есть вариант с созданием svg'шечки поверх рисунка, тогда ничего подгружать не надо будет. это первое, что в голову пришло

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

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

Добавлено через 46 минут
в принципе ничего особенного. div с background'ом в виде карты, поверх див с на котором меняется background-image в зависимости от позиции мыши на диве поверх него. не очень умно, если динамичные изображения подгружаются с сервера... если они создаются скриптом, то это круто...

@Belyy · 26.03.2012, 02:08 **[ТС]**

что означает

Сообщение от Heleg

див с

?
сделал background и png 1px -50% загружаемых картинок

@Heleg · 26.03.2012, 02:52

Сообщение от Belyy

что означает
Сообщение от Heleg
див с
?
сделал background и png 1px -50% загружаемых картинок

ничего не понял, если честно

@Belyy · 26.03.2012, 12:58 **[ТС]**

ничего не понял, если честно

карту сделал через css background-ом, за картинку <map> взял 1px картинку gif, ее же использовал для onmouseout, раньше исп. всю карту ...

@Heleg · 26.03.2012, 14:36

а что за -50%? покажи результат

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Lane 32 / 30 / 1 Регистрация: 08.03.2012 Сообщений: 96
	25.03.2012, 20:37
	Используйте div.. Если можете сделать кусок прозрачным - подложите под него цветную картинку такую же.. На мой взгляд проще сделать две картинки черно-белую и цветную.. Нарезать и собрать в дивах.. Фон цветной картинкой.. А поверху - винегрет из дивов с черно-белыми обрезками.. При наведении див скрывается, за счет z-index или display:none или еще как то.. Было бы понятнее если бы предоставили картиночку.. А чтоб тыщу разных картинок сервер не замучался тянуть, можно заделать все на спрайтах.. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.03.2012, 00:27
	нужна именно карта изображений или просто подсвечивающиеся области? 0

@Belyy 1 / 1 / 1 Регистрация: 16.12.2011 Сообщений: 27
	26.03.2012, 00:47 [ТС]
	как на torg ua ... Добавлено через 1 минуту я сделал через onmouseover onmouseout, но приходиться каждый раз подгружать большую картинку ... 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.03.2012, 14:36
	а что за -50%? покажи результат 0