budowa menu

[czacha777]

Witam próbuje stworzyć menu pod stronę ale napotkałem problem, mianowicie mam dwa rodzaje przycisków jeden jest normalnie widoczny na stronie a drugi ma się zmienić po najechaniu kursorem na owy przycisk. Próbuje rozwiązać to w następujący sposób ale zbytnio nie chce zadzałać.

Kod:

#namenu{
    width: 100%;
    height: 40px;
    display: block;
    border: 1px splid;
    position:   absolute;
    border:1px solid #ff1470; z-index: 315;
}

#przycisk1{
    left:0px;
}


#przycisk2{
    left:200px;
}

#przycisk3{
left:400px;
}

#przycisk4{
    left:600px;
}

#przycisk10{
    left:0px;
}


#przycisk20{
    left:200px;
}

#przycisk30{
left:400px;
}

#przycisk40{
    left:600px;
}
#namenu .overek{
    display: none;
}

#namenu a:visited a:hover .overek{
    display: block; float: left;
}


xHTML

<div id="namenu">


<a href=""><img alt="przycisk1 (6K)" src="grafika/przycisk1.gif" height="40" width="200"  id="przycisk1"/>
<img alt="przycisk1czer (5K)" src="grafika/przycisk1czer.gif" height="40" width="200"id="przycisk10"   class="overek" /></a>

<a href=""><img alt="przycisk2 (6K)" src="grafika/przycisk2.gif" height="40" width="200"id="przycisk2" />
<img alt="przycisk2czer (4K)" src="grafika/przycisk2czer.gif" height="40" width="200"id="przycisk20"  class="overek"/></a>

<a href=""><img alt="przycisk3 (6K)" src="grafika/przycisk3.gif" height="40" width="200"id="przycisk3" />
<img alt="przycisk3czerw (4K)" src="grafika/przycisk3czerw.gif" height="40" width="200"id="przycisk30"  class="overek"/></a>


<a href=""><img alt="przycisk4 (6K)" src="grafika/przycisk4.gif" height="40" width="200"id="przycisk4" />
<img alt="przycisk4czer (2K)" src="grafika/przycisk4czer.gif" height="40" width="200"id="przycisk40"  class="overek"/></a>




</div>

[Pedro84]

Tak się tego nie robi...

Zainteresuj się pseudoklasą :hover

[czacha777]

Tak się tego nie robi...

Zainteresuj się pseudoklasą :hover

A mógłbyś mnie naprowadzić na jakieś gotowe rozwiązanie (przykład) bym mógł go przeanalizować i skopiować , z góry dzięki za pomoc.

[Pedro84]

http://www.w3schools.com/cssref/sel_hover.asp

W Google od cholery przykładów.

[czacha777]

WItam jeśli mogę jeszcze trochę pozawracać głowę to chciałbym zwrócić uwagę że podjęte prze zemnie próby nie poskutkowały, a chciałem to rozwiązać tak:

Kod:

.a:hover
{
    background-image: url(grafika/przycisk1czer.gif); jako klasę chciałem podpiąć każdą grafikę z osobna pod zdjęcie

lub do przycisku #przycisk2{
    left:200px;
{
a:hover    background-image: url(grafika/przycisk1czer.gif);
}

}

Jeśli nie robi się tego w podobny sposób jak pierwszy i dwa pozostałe to jak proszę o odpowiedz.

[nst]

Kod:

}
.button a {
    background-image: url(img/tlo1.png);
    list-style-type: none;
    float: left;
}
.button a:hover {
    background-image: url(img/tlo2.png);
    list-style-type: none;
    float: left;
}

Tu masz z wykorzystaniem 2 osobnych plików tła, musisz jeszcze ustawić powtarzanie itp ale lepiej jest to robić na 1 pliku. Poczytaj o CSS sprite.