Изменить меню на ЯваСкрипт - JavaScript, Ajax

Che Guevara · 20.08.2010, 17:23

Доброго времени суток. Друзья, есть код в ЯС. Задача такова, что нужно изменить его так чтобы можно было вставить изображение-фон каждого пункта меню (рng) на следующие события:
1, Когда меню находится в пассивном режиме (указатель не на нём) - картинка "А"
2, Когда над пунктом меню находится указатель - картинка "Б"

Помогите организовать. Я сам пробовал добавлять background: fon.png не получилось.

Che Guevara · 20.08.2010, 17:25

[CODE]<html>
<head>
</head>
<body>

<style type="text/css">
.mymenudiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 195px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.mymenudiv ul li{
position: relative;
}

/*Sub level menu items */
.mymenudiv ul li ul{
position: absolute;
width: 187px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.mymenudiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.mymenudiv ul li a:visited{
color: black;
}

.mymenudiv ul li a:hover{
background-color: gray;
}

.mymenudiv .subfolderstyle{
background: url(arrow-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .mymenudiv ul li { float: left; height: 1%; }
* html .mymenudiv ul li a { height: 1%; }
/* End */

</style>

Che Guevara · 20.08.2010, 17:25

.продолжение вышесказанного кода.
<script type="text/javascript">
var menuids=["mymenutree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menu ids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a ")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<div class="mymenudiv">
<ul id="mymenutree1">
<li><a href="#">Компьютеры</a></li>
<ul>
<li><a href="#">Готовые модели</a></li>
<li><a href="#">Ноутбуки, нетбуки</a></li>
<li><a href="#">Комплектующие</a></li>
<ul>
<li><a href="#">Материнские платы</a></li>
<li><a href="#">Процессоры и кулеры</a></li>
<li><a href="#">Оперативная память</a></li>
<li><a href="#">Жёсткие диски</a></li>
<li><a href="#">Видеокарты</a></li>
<li><a href="#">Звуковые карты</a></li>
<li><a href="#">Кейсы и БП</a></li>
<li><a href="#">CD/DVD/Floppy приводы</a></li>
<li><a href="#">Мониторы</a></li>
<li><a href="#">Клавиатуры</a></li>
<li><a href="#">Мыши</a></li>
<li><a href="#">Другое</a></li>
<li><a href="#">Периферийный устройства</a></li>
<ul>
<li><a href="#">TV-тюнеры</a></li>
<li><a href="#">Пульты управления</a></li>
<li><a href="#">Звуковые системы</a></li>
<li><a href="#">Модемы</a></li>
<li><a href="#">Кабели/переходники</a></li>
<li><a href="#">Принтеры</a></li>
<li><a href="#">Сканеры</a></li>
<li><a href="#">Флешки</a></li>
<li><a href="#">Внешние USB накопители</a></li>
</ul>
</ul>
</li>
</ul>
<li><a href="#">Фото и видео техника</a></li>
<ul>
<li><a href="#">Цифровые фотоаппараты</a></li>
<li><a href="#">Цифровые видеокамеры</a></li>
<li><a href="#">Аналоговые видеокамеры</a></li>
<li><a href="#">Камеры наблюдения</a></li>
<li><a href="#">Аксессуары</a></li>
</ul>
<li><a href="#">Спутниковое ТВ</a>
<ul>
<li><a href="#">Спутниковые тарелки</a></li>
<li><a href="#">Приёмники и тюнеры</a></li>
<li><a href="#">Аксессуары и кабели</a></li>
</ul>
<li><a href="#">Телевизоры</a></li>
<ul>
<li><a href="#">ЖК телевизоры</a></li>
<li><a href="#">Плазменные телевизоры</a></li>
<li><a href="#">Подставки</a></li>
</ul>
<li><a href="#">Аудио системы</a></li>
<ul>
<li><a href="#">Аналоговые плейеры</a></li>
<li><a href="#">Цифровые плейеры</a></li>
<li><a href="#">Акустические системы</a></li>
</ul>
<li><a href="#">Всё для авто</a></li>
<ul>
<li><a href="#">Магнитолы</a></li>
<li><a href="#">Автосигнализации</a></li>
<li><a href="#">GPS-навигация</a></li>
<li><a href="#">Другая электроника</a></li>
</ul>
<li><a href="#">Телефония и связь</a></li>
<ul>
<li><a href="#">Сотовые телефоны</a></li>
<li><a href="#">Радиотелефоны</a></li>
<li><a href="#">Мини-АТС</a></li>
<li><a href="#">Другое</a></li>
</ul>
<li><a href="#">Крупная бытовая техника</a></li>
<ul>
<li><a href="#">Стиральные машины</a></li>
<li><a href="#">Газовые плиты</a></li>
<li><a href="#">Холодильники</a></li>
</ul>
<li><a href="#">Мелкая бытовая техника</a></li>
<ul>
<li><a href="#">Пылесосы</a></li>
<li><a href="#">Утюги</a></li>
<li><a href="#">Гладильное оборудование</a></li>
</ul>
<li><a href="#">Сервис</a></li>
<ul>
<li><a href="#">Установка и настройка</a></li>
<li><a href="#">Ремонт и замена</a></li>
<li><a href="#">Запасные части</a></li>
</ul>
</ul>
</div>

</body>
</html>[/CODE]

20.08.2010, 17:23	#1
Che Guevara Пользователь Регистрация: 27.07.2010 Сообщений: 91	Изменить меню на ЯваСкрипт Доброго времени суток. Друзья, есть код в ЯС. Задача такова, что нужно изменить его так чтобы можно было вставить изображение-фон каждого пункта меню (рng) на следующие события: 1, Когда меню находится в пассивном режиме (указатель не на нём) - картинка "А" 2, Когда над пунктом меню находится указатель - картинка "Б" Помогите организовать. Я сам пробовал добавлять background: fon.png не получилось. Последний раз редактировалось Che Guevara; 20.08.2010 в 17:29.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Реестр - Необходимо изменить действие по умолчанию для .reg файлов(«Изменить» вместо «Объединить»).	ACE Valery	Windows	7	30.11.2010 23:33
Яваскрипт и selest (html)	Winlook	JavaScript, Ajax	1	11.03.2010 18:41
не работает яваскрипт в браузерах chrome-е и safari	sdf	JavaScript, Ajax	5	03.02.2009 01:23
Перестал работать яваскрипт, причем во всех браузерах сразу.	Adamant	Свободное общение	6	12.09.2008 23:55
Как можно изменить цвет полосы меню компонента TMainmenu на форме?	SkAndrew	Общие вопросы Delphi	6	11.08.2008 17:35

20.08.2010, 17:25	#2
Che Guevara Пользователь Регистрация: 27.07.2010 Сообщений: 91	[CODE]<html> <head> </head> <body> <style type="text/css"> .mymenudiv ul{ margin: 0; padding: 0; list-style-type: none; width: 195px; /* Width of Menu Items / border-bottom: 1px solid #ccc; } .mymenudiv ul li{ position: relative; } /Sub level menu items / .mymenudiv ul li ul{ position: absolute; width: 187px; /sub menu width/ top: 0; visibility: hidden; } / Sub level menu links style / .mymenudiv ul li a{ display: block; overflow: auto; /force hasLayout in IE7 / color: black; text-decoration: none; background: #fff; padding: 1px 5px; border: 1px solid #ccc; border-bottom: 0; } .mymenudiv ul li a:visited{ color: black; } .mymenudiv ul li a:hover{ background-color: gray; } .mymenudiv .subfolderstyle{ background: url(arrow-list.gif) no-repeat center right; } / Holly Hack for IE \/ html .mymenudiv ul li { float: left; height: 1%; } * html .mymenudiv ul li a { height: 1%; } /* End */ </style>