Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как реализовать выделение области при наведении курсора?
 
 автор: Tarasishe   (10.06.2008 в 23:34)   письмо автору
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/ пример карты во вложении

   
 
 автор: Lelik   (11.06.2008 в 02:08)   письмо автору
 
   для: Tarasishe   (10.06.2008 в 23:34)
 

как вариант можно нарисовать один рисунок с 26 кадрами: 25 с подсвеченными областями и 1 без подсветки, а потом абсолютным позиционированием двигать

   
 
 автор: PAT   (11.06.2008 в 02:59)   письмо автору
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)   письмо автору
 
   для: PAT   (11.06.2008 в 02:59)
 

http://www.woweb.ru/fl0/103.swf

   
 
 автор: PAT   (11.06.2008 в 13:12)   письмо автору
 
   для: elenaki   (11.06.2008 в 10:08)
 

Товарищ топикстартер написал: "P/S/ flash ... абсолютно не изучен и не понимаем, поэтому отпадает"

Но товарищ elenaki не понял с первого раза.
Может, сейчас поймёт, со второго раза? :-)

   
 
 автор: elenaki   (11.06.2008 в 13:17)   письмо автору
 
   для: PAT   (11.06.2008 в 13:12)
 

никто не предлагает УЧИТь Флаш. просто этих карт уже СТОЛьКО, что глупо изобретать велосипед.

   
 
 автор: PAT   (11.06.2008 в 13:21)   письмо автору
 
   для: elenaki   (11.06.2008 в 13:17)
 

Пройдя по ссылке http://www.woweb.ru/fl0/103.swf, товарищ топикстартер сразу же поимеет готовый флеш-код для своей карты?

Каким образом? :-)

   
 
 автор: Tarasishe   (11.06.2008 в 22:08)   письмо автору
 
   для: PAT   (11.06.2008 в 02:59)
 

На данный момент наиболее реальным вариантом вижу AREA... спасибо за подскзку... согласен, что flash тут самое оно... но та карта по ссылке... хм... с трудом представляю ее ценность для меня :-)

   
 
 автор: PAT   (12.06.2008 в 04:10)   письмо автору
 
   для: Tarasishe   (11.06.2008 в 22:08)
 

Если будете пользовать приложенные в аттаче файлы, то исправьте описку - в атрибуте USEMAP тега <IMG> добавьте первым символом пропущенную мною решётку - #
Ну и весь комплект тегов
<MAP>
<AREA>
...
</MAP>
перенесите из заголовка в тело документа - т.е. из области <head></head> в область <body></body>.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования