|
 11.9 Кб |
|
| Как реализовать выделение области при наведении курсора?
Собственно имеется карту Украины, необходимо, что б при навидении на область она становилась красной… проблема в том, что области пересекаются, т.е. заменой картинки при наведении не везде получится…
Вопрос, возможно ли … сделать, что б при наведении курсора менялось 2 и более картинок?
Пока только сумел сделать замену одной…
<a href="#"onmouseover="changeImages('m1', 'images/map9-over.gif');
return true;"
onmouseout="changeImages('m1', 'images/map9.gif'); return true;"
onmousedown="changeImages('m1', 'images/map9-over.gif'); return true;"
onmouseup="changeImages('m1', 'images/map9-over.gif'); return true;">
<img src="images/map9.gif"></a>
|
На другом форуме подали идею, что можно сделать отдельно всю карту, а при необходимости показывать другую карту , но с выделенной областью, по аналогии замены изображения, но как сделать несколько ссылок изначально на карте, т.е. областей на которые наводим (далее имеем возможность кликнуть) и карта менялась..
P/S/ flash ... абсолютно не изучен и не понимаем, поэтому отпадает :-(
P/S/S/ пример карты во вложении | |
|
|
|
|
|
|
|
для: Tarasishe
(10.06.2008 в 23:34)
| | как вариант можно нарисовать один рисунок с 26 кадрами: 25 с подсвеченными областями и 1 без подсветки, а потом абсолютным позиционированием двигать | |
|
|
|
|
 1.4 Кб |
|
|
для: Tarasishe
(10.06.2008 в 23:34)
| | Самый, ИМХО, реальный вариант, это:
1. Сделать ОСНОВНУЮ картинку на прозрачной основе, т.е. оттенками серого и черного выделять только границы, водные пространства и названия областей.
2. "Расписать" ОСНОВНУЮ картинку тегами AREA с атрибутом SHAPE="poly" - тегов будет столько же, сколько и областей (положим, N штук).
3. Сделать ещё N картинок на прозрачной основе, на каждой из которых будет изображена закрашенная красным область.
4. Для каждой из N картинок запомнить координаты точки верхнего левого угла на ОСНОВНОЙ картинке, при помещению в которую картинка с закрашенной областью точно совпадет по месту (в примере я координаты картинки внёс в название файла картинки).
5. На каждый тег <AREA> "повесить" события onmouseover, onmouseout, кои будут включать/отключать показ соответствующей картинки ПОД областью, на которую навели/отвели мышь (zIndex ОСНОВНОЙ картинки сделать БОЛЬШЕ, чем zIndex закрашенной).
Работа долгая, муторная.
Но если надо будет сделать - сделаете.
В качестве примера смотрите аттач (работает в FF, делал код и обе картинки минут сорок).
Что до смены 2-х картинок одновременно (и вообще делать что-то еще) - всё в ваших руках: в функции, работающие по наведению мыши, можете добавить ВСЁ, что будет вам угодно. | |
|
|
|
|
|
|
|
|
для: elenaki
(11.06.2008 в 10:08)
| | Товарищ топикстартер написал: "P/S/ flash ... абсолютно не изучен и не понимаем, поэтому отпадает"
Но товарищ elenaki не понял с первого раза.
Может, сейчас поймёт, со второго раза? :-) | |
|
|
|
|
|
|
|
для: PAT
(11.06.2008 в 13:12)
| | никто не предлагает УЧИТь Флаш. просто этих карт уже СТОЛьКО, что глупо изобретать велосипед. | |
|
|
|
|
|
|
|
для: elenaki
(11.06.2008 в 13:17)
| | Пройдя по ссылке http://www.woweb.ru/fl0/103.swf, товарищ топикстартер сразу же поимеет готовый флеш-код для своей карты?
Каким образом? :-) | |
|
|
|
|
|
|
|
для: PAT
(11.06.2008 в 02:59)
| | На данный момент наиболее реальным вариантом вижу AREA... спасибо за подскзку... согласен, что flash тут самое оно... но та карта по ссылке... хм... с трудом представляю ее ценность для меня :-) | |
|
|
|
|
|
|
|
для: Tarasishe
(11.06.2008 в 22:08)
| | Если будете пользовать приложенные в аттаче файлы, то исправьте описку - в атрибуте USEMAP тега <IMG> добавьте первым символом пропущенную мною решётку - #
Ну и весь комплект тегов перенесите из заголовка в тело документа - т.е. из области <head></head> в область <body></body>. | |
|
|
|