[HTML CSS]Menu - inny obrazek po najechaniu myszką

[Scoff3r]

Witam wszystkich forumowiczów moje doświadczenie z tworzeniem stron [HTML CSS] nie jest zbyt duże ale muszę zrobić własną stronę w w/w technologi, mam problem z menu poziomym, chciał bym zrobić żeby po najechaniu myszką na pozycję menu obraz się podświetlał przygotowałem w psd taki obrazek


HTMLa napisałem tak:

Kod: Zaznacz cały

<div id="menu">
<div class="ikony">
<div class="linki left"><a href="/" class="link"> </a</div>
</div>
</div>

A CSSa tak

Kod: Zaznacz cały

#menu
    {
        width: 100%;
        height:84px;
        background-image:url(image/menu_belka.png);
        background-repeat:no-repeat;
        margin:auto;
    }
#menu .ikony
    {
        width:300px;
    }
#menu .linki
    {
        padding: 19px 10px;
    }
a.link
    {
        background-image:url(image/default_menu_01.png);
        width: 181px;
        height: 39px;
        background-repeat: no-repeat;
        display: block;
        overflow:hidden;
    }
a.link:hover
{
    background-position:bottom;
}

Efekt jest taki:
przed najechaniem jest ok


Ale po najechaniu już nie


Czy jest to może źle zrobiony obrazek czy da się to w css zrobić żeby drugi obrazek był w identycznej pozycji a nie pływał do góry czy w dół.
Jak widać w dolnym obrazku jest dodatkowy background ale chyba nie jest to powodem pływania obrazka.
Dodam że korzystam z firebuga ale tak jak pisałem moja wiedza nie jest duża.
Dziękuje wszystkim za pomoc.

[Lobo]

Nie łatwiej podzielić ten obrazek na dwa i dać drugi jako background do a:hover ? Poza tym obrazek ma 108 px wysokości czyli połowa to jest 54px, a nie 39, szerokość ma 182px nie 181. Chyba że taki był zamiar tylko po co robić większy w photoshopie wtedy.

Zamiast dodawać co chwile nowe klasy możesz też pisać np. div.linki a{...} i div.linki a:hover{...} (będzie to dotyczyło wszystkich linków w podanym divie.

Wszystko związane z tłem możesz zapisywać w jednej linii np.
background: #000000 url((image/menu_belka.png) 0 0 no-repeat;