Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 139814
11.07.2008, 16:24
0.00 руб.
0 3 1
Компьютеры Программирование
Уважаемые Эксперты, можно ли сделать так, чтоб при наведении мышки на навигационную карту, цвет карты менялся?

Обсуждение

Неизвестный
11.07.2008, 17:07
общий
это ответ
Здравствуйте, Кошман Дмитрий!
Конечно можно! Но следует помнить следующие -
Теги карта(map) и область(area) определяются картинки(img), и невидимы пользователю.
Область не может оперировать с картинкой "под собой", она просто служит для создания навигаций, и всякие операции над собой через CSS либо игнорирует, либо создает больше проблем, чем решает.

Эффект, который вы описали, достигается с помощью разных картинок.
Например, так, как я сделал в программе Macromedia.
Общий смысл какой - при наведении на область, меняется картинка, к которой эта область привязана. Подразумевается, что эта картинка - точно такая же как и первая, но там, где будет располагаться область - изменен цвет. Код в приожении.
Для работы надо просто создать файлы image1 и image2, ну и координаты в области подправить...

Есть еще вариант делать это через контейнеры(div) или слои(layer), но это не самое универсальное и стабильное решение.<p><fieldset style=‘background-color:#EFEFEF; width:80%; border:#777777 1px solid; padding:10px;‘ class=fieldset><font color=#777777><i>Исправлено двойное обращение.</i>
-----
</font><font color=#777777 size=1><b>• Отредактировал: <a href=http://rusfaq.ru/info/user/18359 target=_blank>Николай Владимирович / Н.В.</a></b> (Профессор)
<b>• Дата редактирования:</b> 11.07.2008, 18:29 (MCK)</font></fieldset>

Приложение:
type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <body onload="MM_preloadImages(‘image2‘)"><a href="#"><img src="image1" name="rolover-proekt" usemap="#Map" id="rolover-proekt" /></a> <map name="Map" id="Map"> <area onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(‘rolover-proekt‘,‘‘,‘image2‘,1)" shape="rect" coords="93,69,196,152" href="#" /> </map> </body> </html>
Неизвестный
11.07.2008, 17:27
общий
Викулин Антон Юрьевич aka obla (статус: Студент)Спасибо за ответ, прийдется тогда оставить картинку так как есть, потому как картинка большая, к сожалению не для моего случая.Возьму Ваш пример возьму на вооружение.
Неизвестный
14.07.2008, 08:14
общий
Для БОЛЬШИХ картинок обычно выполняют нарезку в таблицу - правда, если есть много активных элементов небольшого размера, то таблица может получится очень сложной...Короче, говоря - надо макет смотреть.. .Всегда есть выход для такого решения...
Форма ответа