link-hover afbeelding?

Stel hier je vragen over website codering (html, css, php, etc) en het maken en bewerken van websites

Moderators: Gloomy, Walter, Mittch

link-hover afbeelding?

Berichtdoor webmasterbob op vr jan 14, 2011 21:55

Hi,

Ik ben nu een website aan het maken en het gaat al aardig goed.
In het navigatiemenu heb ik nu vier knopjes om naar vier verschillende pagina's te gaan.
De knopjes zijn afbeeldingen. Nu heb ik ook afbeeldingen die ik graag wil als je er met je muis op gaat staan (=hover).
Hoe moet ik dit met een afbeelding doen?

Greetz

webmasterbob
 
Berichten: 71
Geregistreerd op: di dec 21, 2010 21:20

Re: link-hover afbeelding?

Berichtdoor Gloomy op za jan 15, 2011 15:46

ik maak dat soort links altijd in een list.

dus
Code: Selecteer alles
<ul id="navigatie_boven">
    <li><a href="home.html" class="active"> Home </a></li>
    <li><a href="portfolio.html"> Portfolio </a></li>
    <li><a href="contact.html"> Contact </a></li>
    <li><a href="nogiets.html"> NogIets </a></li>
</ul>


in de CSS doe je dan het volgende:
Code: Selecteer alles
#navigatie_boven { 
     list-style:none;
}
#navigatie_boven li { 
    display: inline;
}
#navigatie_boven li a {
     background-image: url('afbeelding1.jpg'); 
     height: 50px;
     width: 200px;
}
#navigatie_boven li a:hover {
     background-image: url('afbeelding2.jpg');
}
Gloomy
 
Berichten: 2233
Geregistreerd op: ma feb 25, 2008 10:32



Keer terug naar Vragen over Webdesign en codering (html, css, php, ...)

Wie is er online

Gebruikers op dit forum: Geen geregistreerde gebruikers en 0 gasten

cron