[JavaScript][CSS][HTML] Nakładanie obrazków Opcje

[Micchaleq]

Witam serdecznie,

Przy pomocy JS chciałbym zrobić sobie menu, które pokazuje w jakim dziale znajduje się użytkownik, czyli podswietlenie aktualnego buttona.

Robie to za pomocą :

[PHP] pobierz, plaintext 
$(function(){
    $('body').wskaznik();
});
 
(function($) {
    $.fn.wskaznik = function() {
        var url = location.href;
        var re = /([a-z]+)\.html$/;
        if (url.match(re)) {
            var wynik = url.match(re);
            this.first().attr('id', wynik[1]);
        } else {
            this.first().attr('id', 'index');
        }
    };
})(jQuery);
[PHP] pobierz, plaintext 

kod CSS

[HTML] pobierz, plaintext 
#menu{
	width: 985px;
	height: 82px;
}
#index #menu{
    background: url('./img/home_.png') no-repeat;
	z-index: 5;
}
 
a.home{
background: url('./img/home.png');
width: 197px;
height: 84px;
display: block;
overflow:hidden;
float: left;
z-index: 1;
}
a.home:hover{
background-position: 0px -84px;
z-index: 1;
}
 
	<div id="menu">
		<a href="index.html" class="home"></a>
        </div>
[HTML] pobierz, plaintext 

niestety pomimo użycia z-index obrazek home_.png pokazuje się pod home.png

[kamil4u]

Zrób to inaczej...
Gdy element jest wybrany zmieniaj mu tło, a nie nakładaj nad niego inny element.
Problem jest to, że element zawiera się w elemencie, więc jeden nie może być nad drugim.