Замена изображений в меню

Не получается, чтобы при щелчке по определенной картинке пункта меню joomla она заменялась на другую, причем для каждого пункта разную. Может в скрипте дело.
Вот то что имею.
sfHover = function() {
var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls.onmouseover=function() {
clearTimeout(this.timer);
if(this.className.indexOf("sfhover") == -1)
this.className+="sfhover";
}
sfEls.onmouseout=function() {
this.timer = setTimeout(sfHoverOut.bind(this), 20);
}
}
}

function sfHoverOut() {
clearTimeout(this.timer);
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

CSS

#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 80%;
color: #395467;
padding: 60px 20px;
font-weight: bold;
text-transform: uppercase;

}
.menu-item0{
background: url(../../images/company.jpg) no-repeat center bottom;


}


.menu-item1{
background: url(../../images/production.jpg) no-repeat center bottom;


}
.menu-item2{
background: url(../../images/news.jpg) no-repeat center bottom;
}
.menu-item3{
background: url(../../images/partners.jpg) no-repeat center bottom;
}
.menu-item4{
background: url(../../images/publications.jpg) no-repeat center bottom;
}
.menu-item5{
background: url(../../images/questions.jpg) no-repeat center bottom;
}
.menu-item6{
background: url(../../images/contacts.jpg) no-repeat center bottom;
}
#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus {
color: #395467;
}

#ja-cssmenu li:hover a,
#ja-cssmenu li.sfhover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.havechild-activesfhover a {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF;
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF;
}

[x-yuri]

для начала давай оформим код с помощью тэгов ([js], кнопка на панели инструментов) и расставим отступы (можно просто отредактировать существующее сообщение)

[zorro77786]

Не получается, чтобы при щелчке по определенной картинке пункта меню joomla она заменялась на другую, причем для каждого пункта разную. Может в скрипте дело.
Вот то что имею.

sfHover = function() {
var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls.onmouseover=function() {
clearTimeout(this.timer);
if(this.className.indexOf("sfhover") == -1)
this.className+="sfhover";
}
sfEls.onmouseout=function() {
this.timer = setTimeout(sfHoverOut.bind(this), 20);
}
}
}

function sfHoverOut() {
clearTimeout(this.timer);
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

CSS

#ja-cssmenu li a {
display: block;
text-decoration: none;
font-size: 80%;
color: #395467;
padding: 60px 20px;
font-weight: bold;
text-transform: uppercase;

}
.menu-item0{
background: url(../../images/company.jpg) no-repeat center bottom;


}


.menu-item1{
background: url(../../images/production.jpg) no-repeat center bottom;


}
.menu-item2{
background: url(../../images/news.jpg) no-repeat center bottom;
}
.menu-item3{
background: url(../../images/partners.jpg) no-repeat center bottom;
}
.menu-item4{
background: url(../../images/publications.jpg) no-repeat center bottom;
}
.menu-item5{
background: url(../../images/questions.jpg) no-repeat center bottom;
}
.menu-item6{
background: url(../../images/contacts.jpg) no-repeat center bottom;
}
#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus {
color: #395467;
}

#ja-cssmenu li:hover a,
#ja-cssmenu li.sfhover a,
#ja-cssmenu li.havechildsfhover a,
#ja-cssmenu li.havechild-activesfhover a {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF; 
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/mainnav-active.gif) no-repeat center ;
color: #FFFFFF;
}

[x-yuri]

после

this.className+="sfhover";

пишем

alert(this.className);

и смотрим, того ли мы ждали

[zorro77786]

Сделал как сказано в предидущем посте.

sfHover = function() {
	var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; ++i) {
		sfEls[i].onmouseover=function() {
			clearTimeout(this.timer);
			if(this.className.indexOf("sfhover") == -1)
				this.className+="sfhover";
				alert(this.className);
		}

Браузер стал выдавать ошибку sfhover.
Забыл уточнить. Те картинки, которые заменяют предидущие при щелчке должны не меняться обратно, до того, пока не щелкнут по другому пункту меню.

[x-yuri]

не ошибку, а окно, в котором класс элемента выводится. alert выводит окно

только я не вижу на что влияет класс sfhover. Или выводилось что-то типа havechildsfhover?

чтобы менялась картинка, можно создать классы типа menu-item1-active и т.д. и при наведении мыши менять класс соответствующего элемента с menu-item1 на menu-item1-active. А потом возвращать

[zorro77786]

Спасибо. Я что-то подобное пробывал. А можно пример?