menubalk hover problemen met img

[sasvdpasch]

Hallo,

Ik ben nog steeds bezig met het optimaliseren van mijn website en ik heb nog problemen met mijn menubalk.
Mijn menubalk bestaat uit 11 plaatsen met:
Welkom (menu-welkom.jpg)
de villa (menu-devilla.jpg)
foto's (menu-foto's.jpg)
faciliteiten (menu-faciliteiten.jpg)

Het zijn allemaal linkjes dus mijn html ziet er zo uit:

<div id="navigatie">
      <ul>
      <li><a href="../index.htm"><img src="../images/menu-welkom.jpg" width="215" height="31" alt="welkom" /></a></li>
      <li><a href="../de_villa.htm"><img src="../images/menu-devilla.jpg" width="215" height="31" alt="de villa" /></a></li>
      <li><a href="../fotos.htm"><img src="../images/menu-fotos.jpg" width="215" height="31" alt="fotos" /></a></li>
     <li><a href="../faciliteiten.htm"><img src="../images/menu-faciliteiten.jpg" width="215" height="31" alt="faciliteiten" /></a></li>

(resultaat hiervan is te zien op www.balivakantievilla.nl)

mijn css ziet er als volgt uit:

[css]#navigatie {
float: left;
width: 215px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
vertical-align: top;
background-color: #e8ebec;
height: 450px;
background-image: url(images/menubalk.jpg);
background-repeat: repeat-y;
}
#headcontainer #container #navigatie ul li a img {
border: 0px;
}
#navigatie ul {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
}

#navigatie ul li {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
float: left;
list-style-type: none;
display: block;
height: 31px;
width: 215px;
}[/css]



Nu het probleem:

Ik wil mijn plaatjes hoveren, dit betekent dat als ik er met mijn muis overheen ga ik een ander plaatje van:
welkom (menu-welkom-donker.jpg)
de villa (menu-devilla-donker.jpg)
foto's (menu-fotos-donker.jpg)
faciliteiten (menu-faciliteiten-donker.jpg)


Hoe doe ik dit?
Nieuwe css's aanmaken? css aanpassen?
Wil dit het liefst oplossen met html/css en niet met javascript

 

[Miike]

Ik zou zeggen, pas je huidige manier om de images op hun plaats te krijgen aan door:

#navigatie ul li a {
width: 215px;
height: 31px;
background-image: url(images/menu-welkom.jpg);
}

En zorg dan voor de verandering van plaatje bij hover door:

#navigatie ul li a:hover {
width: 215px;
height: 31px;
background-image: url(images/menu-welkom-donker.jpg);
}

Succes!:thumb:

 

[sasvdpasch]

dat betekent dus dat ik voor elk plaatje een nieuwe css moet maken

dus voor welkom
villa
faciliteiten
fotos
omgeving
gastenboek
reserveren
contact
links

dus dan krijg je eigenlijk dit:

#navigatie ul li index a{
width: 215px;
height: 31px;
background-image: url(images/menu-welkom.jpg);
}

#navigatie ul li index a:hover {
width: 215px;
height: 31px;
background-image: url(images/menu-welkom-donker.jpg);

#navigatie ul li devilla a{
width: 215px;
height: 31px;
background-image: url(images/menu-devilla.jpg);
}

#navigatie ul li devilla a:hover {
width: 215px;
height: 31px;
background-image: url(images/menu-devilla-donker.jpg);

#navigatie ul li fotos a{
width: 215px;
height: 31px;
background-image: url(images/menu-fotos.jpg);
}

#navigatie ul li fotos a:hover {
width: 215px;
height: 31px;
background-image: url(images/menu-fotos-donker.jpg);

Of moet het achter de A?

 

[sasvdpasch]

He,

Ik zou nu echt niet weten hoe ik dat moet doen en hoe te beginnen?
Mijn navigatiebalk ziet er zo uit:
www.balivakantievilla.nl

<div id="navigatie">
      <ul>
      <li><a href="index.htm"><img src="images/menu-welkom.jpg" width="215" height="31" alt="welkom" /></a></li>
      <li><a href="de_villa.htm"><img src="images/menu-devilla.jpg" width="215" height="31" alt="de villa" /></a></li>
      <li><a href="fotos.htm"><img src="images/menu-fotos.jpg" width="215" height="31" alt="fotos" /></a></li>
     <li><a href="faciliteiten.htm"><img src="images/menu-faciliteiten.jpg" width="215" height="31" alt="faciliteiten" /></a></li>
      <li><a href="omgeving.htm"><img src="images/menu-omgeving.jpg" width="215" height="31" alt="omgeving" /></a></li>
      <li><a href="activiteiten.htm"><img src="images/menu-activiteiten.jpg" width="215" height="31" alt="activiteiten" /></a></li>
      <li><a href="prijzen.htm"><img src="images/menu-prijzen.jpg" width="215" height="31" alt="prijzen" /></a></li>
      <li><a href="reserveren.php"><img src="images/menu-reserveren.jpg" width="215" height="31" alt="reserveren" /></a></li>     
      <li><a href="contact.php"><img src="images/menu-contact.jpg" width="215" height="31" alt="contact" /></a></li>
      <li><a href="gastenboek.htm"><img src="images/menu-gastenboek.jpg" width="215" height="31" alt="gastenboek" /></a></li>
      <li><a href="links.htm"><img src="images/menu-links.jpg" width="215" height="31" alt="links" /></a></li>
      </ul>

 

[csshunter]

Hoi!

hoe te beginnen?

• Even dit artikeltje lezen.
• Dan dit voorbeeldje bekijken.
• En zo nodig, nog even deze lezen.

Daarna gaan we alle 11 menu-afbeeldingen èn alle 11 hover-afbeeldingen in 1 (één!) image zetten.
Dat gebruiken we als achtergrond voor alle links van het menu; de images in de html kunnen allemaal verdwijnen.
En tenslotte rangeren we met css alle achtergronden voor het rijtje van de links naar de goede plaats (zowel voor de ruststand als voor de hover-stand).
Tegelijkertijd is de pagina ook sneller geworden.
Mooi hè?

Met vriendelijke groet,
CSShunter

 

[Miike]

CSSHunter bedankt voor die waardevolle informatie, dat is veel minder omslachtig dan hoe ik het altijd gewend was te doen! :thumb:

 

[grumbkow]

Overigens wil ik hier even op melden dat je voor dat menu geen enkele image nodig hebt.

Een background color met transparantie werkt ook prima en is een stuk sneller dan afbeeldingen!

 

[csshunter]

Eh, ja, maar dan wordt de witte belettering van de menu-items ook donkerder bij een hover.

 

[grumbkow]

Ja zat ik me ook te bedenken,

Ik maak zulke menu's ook in combinatie met javascript, had ik even niet aan gedacht.