Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите с меню 
:(
    Опции темы
michail20033
Дата 19.10.2006, 13:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 19.10.2006

Репутация: нет
Всего: нет
Добрый день. Помогите пожалуйста. Есть обычное графическое меню и небольшой javascript для смены картинок. Все работает. Наводишь мышкой на кнопку меню- кнопка меняется с одной на другую. НО! Нужно чтобы кнопка не только менялась при наведении, но и при нажатии на нее оставалась такой же как при наведении. Тоесть нажал на кнопку - она изменилась как при наведении и осталась такой, в том разделе куда указывала ссылка кнопки. Просмотрел уже много всего, но так и ничего не получилось. 

Вот  скрипт

Код

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { browser_ok = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { browser_ok = 'true'; }
else { browser_ok = 'false'; }

function change(img, ref) {
   if (browser_ok == 'true') {
       document.images[img].src = ref;
   }
}

if (browser_ok == 'true')
{
a1=new Image; a1.src="images/home.jpg";
a2=new Image; a2.src="images/home_over.jpg";
a3=new Image; a3.src="images/news.jpg";
a4=new Image; a4.src="images/news_over.jpg";
a5=new Image; a5.src="images/akcia.jpg";
a6=new Image; a6.src="images/akcia_over.jpg";
a7=new Image; a7.src="images/library.jpg";
a8=new Image; a8.src="images/library_over.jpg";
a9=new Image; a5.src="images/forum.jpg";
a10=new Image; a6.src="images/forum_over.jpg";
a11=new Image; a7.src="images/search.jpg";
a12=new Image; a8.src="images/search_over.jpg";
a13=new Image; a7.src="images/volya.jpg";
a14=new Image; a8.src="images/volya_over.jpg";
}


Вот меню
Код

<a href="index.php"
    onmouseover="change('pic1','images/home_over.jpg');"
    onmouseout="change('pic1','images/home.jpg');"><img
    name="pic1" src="images/home.jpg" width="75" height="35" alt="Вернуться на главную" border="0"></a><a href="index.php?go=news"
    onmouseover="change('pic2','images/news_over.jpg');"
    onmouseout="change('pic2','images/news.jpg');"><img name="pic2" src="images/news.jpg" width="75" height="35" alt="Новости" border="0"></a><a href="index.php?go=comp"
    onmouseover="change('pic3','images/akcia_over.jpg');"
    onmouseout="change('pic3','images/akcia.jpg');"><img
    name="pic3" src="images/akcia.jpg" width="87" height="35" alt="Кампании" border="0"></a><a href="index.php?go=lib"
    onmouseover="change('pic4','images/library_over.jpg');"
    onmouseout="change('pic4','images/library.jpg');"><img
    name="pic4" src="images/library.jpg" width="96" height="35" alt="Архив файлов" border="0"></a><a href="/forum"
    onmouseover="change('pic5','images/forum_over.jpg');"
    onmouseout="change('pic5','images/forum.jpg');"><img
    name="pic5" src="images/forum.jpg" width="60" height="35" alt="Форум" border="0"><a href="index.php?go=search"
    onmouseover="change('pic6','images/search_over.jpg');"
    onmouseout="change('pic6','images/search.jpg');"><img
    name="pic6" src="images/search.jpg" width="59" height="35" alt="Архив файлов" border="0"></a><a href="index.php?go=info"
    onmouseover="change('pic7','images/volya_over.jpg');"
    onmouseout="change('pic7','images/volya.jpg');"><img
    name="pic7" src="images/volya.jpg" width="51" height="35" alt="О нас" border="0"></a>
PM MAIL   Вверх
AlexST
Дата 19.10.2006, 13:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 331
Регистрация: 30.4.2006
Где: Москва

Репутация: нет
Всего: 3
Здесь вопрос такой: как скрипт на странице раздела узнает, что эту картинку надо отобразить именно так. Тут уж карты тебе в руки. 
Вообще проще сделать чтобы скрипт сам менял картинку в зависимости от раздела, который отображается (если нет каких-то особенностей, ИМХО).
PM MAIL ICQ   Вверх
Avb
Дата 19.10.2006, 14:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13
michail20033, у тебя в href у ссылок стоят php файлы, что подразумевает перезагрузку страницы, и тут ИМХО лучше php-скриптом прописываешь нужный тебе src  в соответствующий img и не навешиаешь обработчики событий для данного пункта меню.

Для случая, когда ссылки не подразумевают перезагрузку меню (грузится другой фрейм, AJAX, простой js и т.п.) я отредактировал твой код:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<script type="text/javascript">
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { browser_ok = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { browser_ok = 'true'; }
else { browser_ok = 'false'; }

function change(img, ref) {
   if(img == currentItem) {return false;}
   if (browser_ok == 'true') {
       document.images[img].src = ref;
   }
}

currentItem = '';
currentDefaultImage = '';

function setCurrentItem(img, ref) {
   if (browser_ok == 'true' && currentItem != '' && currentDefaultImage != '') {
       document.images[currentItem].src = currentDefaultImage;
   }
    currentItem = img;
    currentDefaultImage = ref;
}

if (browser_ok == 'true')
{
a1=new Image; a1.src="images/home.jpg";
a2=new Image; a2.src="images/home_over.jpg";
a3=new Image; a3.src="images/news.jpg";
a4=new Image; a4.src="images/news_over.jpg";
a5=new Image; a5.src="images/akcia.jpg";
a6=new Image; a6.src="images/akcia_over.jpg";
a7=new Image; a7.src="images/library.jpg";
a8=new Image; a8.src="images/library_over.jpg";
a9=new Image; a5.src="images/forum.jpg";
a10=new Image; a6.src="images/forum_over.jpg";
a11=new Image; a7.src="images/search.jpg";
a12=new Image; a8.src="images/search_over.jpg";
a13=new Image; a7.src="images/volya.jpg";
a14=new Image; a8.src="images/volya_over.jpg";
}
</script>
</head> 
<body>
<a href="#"
    onmouseover="change('pic1','images/home_over.jpg');"
    onmouseout="change('pic1','images/home.jpg');"
    onclick="setCurrentItem('pic1', 'images/home.jpg');">
    <img name="pic1" src="images/home.jpg" width="75" height="35" alt="Вернуться на главную" border="0"></a>
<a href="#"
    onclick="setCurrentItem('pic2', 'images/news.jpg');"
    onmouseover="change('pic2','images/news_over.jpg');"
    onmouseout="change('pic2','images/news.jpg');"><img name="pic2" src="images/news.jpg" width="75" height="35" alt="Новости" border="0"></a>
<a href="#"
    onclick="setCurrentItem('pic3', 'images/akcia.jpg');"
    onmouseover="change('pic3','images/akcia_over.jpg');"
    onmouseout="change('pic3','images/akcia.jpg');"><img
    name="pic3" src="images/akcia.jpg" width="87" height="35" alt="Кампании" border="0"></a>
<a href="#"
    onclick="setCurrentItem('pic4', 'images/library.jpg');"
    onmouseover="change('pic4','images/library_over.jpg');"
    onmouseout="change('pic4','images/library.jpg');"><img
    name="pic4" src="images/library.jpg" width="96" height="35" alt="Архив файлов" border="0"></a>
<a href="#"
    onclick="setCurrentItem('pic5', 'images/forum.jpg');"
    onmouseover="change('pic5','images/forum_over.jpg');"
    onmouseout="change('pic5','images/forum.jpg');"><img
    name="pic5" src="images/forum.jpg" width="60" height="35" alt="Форум" border="0">
<a href="#"
    onclick="setCurrentItem('pic6', 'images/search.jpg');"
    onmouseover="change('pic6','images/search_over.jpg');"
    onmouseout="change('pic6','images/search.jpg');"><img
    name="pic6" src="images/search.jpg" width="59" height="35" alt="Архив файлов" border="0"></a>
<a href="#"
    onclick="setCurrentItem('pic7', 'images/volya.jpg');"
    onmouseover="change('pic7','images/volya_over.jpg');"
    onmouseout="change('pic7','images/volya.jpg');"><img
    name="pic7" src="images/volya.jpg" width="51" height="35" alt="О нас" border="0"></a>
</body>
</html>


P.S.  в чем смысл browser_ok?
PM MAIL   Вверх
12345c
Дата 19.10.2006, 17:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Решим задачу так, чтобы меню само выключало нажатую кнопку и меняло картинку на ней, если ссылка совпадает с адресом документа. Заодно сделаем скрипт меню в более приличном виде. (Взятый скрипт был очень старым, поэтому удалим мусор.)

Пока что сделал генерацию меню и проверил в 3 браузерах:
Код
<body>
<style>
  .imgMenu{cursor:pointer;cursor:hand;}
</style>
<script>  urlParts=['images/','_over','jpg',51,35,'index.php?go=']; //массив имён по умолчанию
hMenu={};
hMenu.s="./,snow,gif,22,22;,home,,75;,news,,87;,akcia,,96;,library,,60;,forum,,59;,search,;,volya,".split(';');
hMenu.h="aaaa,;index.php,;,news;,comp;,lib,;/forum,;,search;,info".split(';');
hMenu.b=[];
for(i=0;i<hMenu.s.length;i++){hMenu.b[i]=hMenu.s[i].split(','); // заготовки адресов рисунков
}
hMenu.hh=[];
for(i=0;i<hMenu.h.length;i++){hMenu.hh[i]=hMenu.h[i].split(','); // заготовки ссылок
}
hMenu.i=[];hMenu.isr=[];hMenu.is0=[];
for(i=0;i<hMenu.s.length;i++){ //предзагрузка
  hMenu.i[i]=new Image;
  hMenu.isr[i]=urlParts[0]+hMenu.b[i][1]+urlParts[1]+'.'
    +(hMenu.b[i][2]?hMenu.b[i][2]:urlParts[2]);
  hMenu.is0[i]=urlParts[0]+hMenu.b[i][1]+'.'+(hMenu.b[i][2]?hMenu.b[i][2]:urlParts[2]);
}
//alert(hMenu.s[0]);
genMenu=function(){  //генерация меню (если JS отключен, нужна замена этому блоку)
  s='';
  for(i=0;i<hMenu.s.length;i++){
  s+='<a href='
    +(hMenu.hh[i][0]?hMenu.hh[i][0]:urlParts[5])
    +hMenu.hh[i][1]
    +'><img src='
    +(hMenu.b[i][0]?hMenu.b[i][0]:urlParts[0])+hMenu.b[i][1]
    +'.'+(hMenu.b[i][2]?hMenu.b[i][2]:urlParts[2])
    +' width='+(hMenu.b[i][3]?hMenu.b[i][3]:urlParts[3])
    +' height='+(hMenu.b[i][4]?hMenu.b[i][4]:urlParts[4])
    +' class=imgMenu id=IM'+i+' border=0></a>';
}
//alert(s)
document.body.innerHTML+=s;
}
genMenu();
document.onmouseover
  =function(ev){if((t=ev?ev.target:event.srcElement).className=='imgMenu'){/*alert(hMenu.isr[t.id.substr(2)]);*/t.src=hMenu.isr[t.id.substr(2)];}}
document.onmouseout
=function(ev){if((t=ev?ev.target:event.srcElement).className=='imgMenu'){/*alert(hMenu.is0[t.id.substr(2)]);*/t.src=hMenu.is0[t.id.substr(2)];}}
</script>
Дальше особо сложного нет - пишем при генерации условие выбора картинки в зависимости от document.location: если конец совпадает (обнаруживается по образцу) с выбираемым (hMenu.hh[i][0]?hMenu.hh[i][0]:urlParts[5])+hMenu.hh[i][1] , то ссылка не пишется и картинка выбирается другой.

Если нужна совместимость с отключённым JS - несколько иначе; всё, что генерируется, придётся писать. И менять картинку без JS в клиенте не получится. Чтобы облегчить себе задачу написания такого меню, можем вывести переменную s в textarea скриптом и скопировать в новый код HTML.
PM WWW   Вверх
SelenIT
Дата 20.10.2006, 01:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401
michail20033, на дворе XXI век и ролловеры на JS слегка вышли из моды. Есть альтернативный подход.

А чтобы активная ссылка выделялась так же, как наведенная - можно создать для нее специальный CSS-класс (напр. a.current) с теми же стилевыми свойствами, что у a:hover, и сделать что-то вроде такого (для примера из ссылки выше):
Код

onload = function() {
   var menulinks = document.getElementById("mainmenu").getElementsByTagName("a");
   for (var i=0; i<menulinks.length; i++) {
      if (menulinks[i].href && menulinks[i].href == location.href) menulinks[i].className += " current";
   }
}



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Avb
Дата 20.10.2006, 09:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13
SelenIT, IE понимает hover только для <a>-шки.
В данном случае - все ОК. Но если надо менять background-image скажем дива, то все равно нужно дописывать javascript.
PM MAIL   Вверх
Zeroglif
Дата 20.10.2006, 09:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66
Цитата(Avb @  20.10.2006,  09:39 Найти цитируемый пост)
SelenIT, IE понимает hover только для <a>-шки.

С позавчера IE поддерживает hover не только для a. В семёрке... smile
PM MAIL WWW   Вверх
Avb
Дата 20.10.2006, 11:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13
Цитата(Zeroglif @  20.10.2006,  09:58 Найти цитируемый пост)
С позавчера IE поддерживает hover не только для a. В семёрке... 


Осталось починить совсем чуть-чуть http://www.quirksmode.org/bugreports/archi...beta/index.html  smile 
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0995 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.