Afbeeldingmenu maken

Hey,

Ik wil een menu maken met afbeeldingen, die een andere afbeelding weergeven als je erover heen gaat of als je op die pagina bent.
Ik kom er alleen niet uit, ben zelf aan een beginnetje begonnen, maar loop nu echt vast. Hoe krijg ik dit werkend?

html:

<a href="index.html"><div class="home"></div></a>

css:

div.home{
    width:102px;
    height:50px;
    margin:0px;
    padding:0px;
    float:left;
    background-image:url(img/home.png);
}
div.home a:hover{
    width:102px;
    height:50px;
    margin:0px;
    padding:0px;
    float:left;
    background-image:url(img/homeh.png);    
}

home.png:
homeh.png:
Alvast bedankt!

<a href="index.html"><div class="home"></div></a>

vervangen door:

<a class="home" href="index.html"></a>

en je css:

a.home{
    width:102px;
    height:50px;
    margin:0px;
    padding:0px;
    float:left;
    background-image:url(img/home.png);
}
a.home:hover{
    width:102px;
    height:50px;
    margin:0px;
    padding:0px;
    float:left;
    background-image:url(img/homeh.png);    
}

Bedankt, nu weet ik dit ook weer Wist dit ook nooit

Marjolein echt bedankt!
Ga het over twee uur uitproberen, zit nu op school, boring dus...

ik verveel me dus ik test hem wel effe voor je

Spyrose schreef:

Marjolein echt bedankt!
Ga het over twee uur uitproberen, zit nu op school, boring dus...

http://smiegles.nl/mijnpagina.php?naam=smiegles&p=smiegles.nl

Het werkt geweldig, echt bedankt!

Nog een vraagje, kun je met css ook nog instellen dat hij de homebutton als homeh.png weergeeft als je dus op die pagina bent?

zelfde css naampje veranderen en dan bijvoorbeeld

<a class="index" href="index.html"></a>

zoiets meschien

Smiegles wat bedoel je?

Ik bedoel dat ik wil dat hij de button constant als hover ziet als die pagina de huidige pagina is.
Dat wil ik dan eigenlijk niet op elke pagina moeten gaan instellen, het liefst wil ik dat hij dat automatisch ziet.
Maar dat is eigenlijk een php functie die je niet met css of html kunt toepassen.
Zoiets:
If huidige pagina==link, use img/homeh.png

Dit kan wel met css maar ik heb dit nog nooit toegepast. Ik zal het wel eens opzoeken en uitproberen dan maak ik er wel een tut van

Marjolein schreef:

Dit kan wel met css maar ik heb dit nog nooit toegepast. Ik zal het wel eens opzoeken en uitproberen dan maak ik er wel een tut van

aardig van je marjolein

Geweldig
Next Question! Sorry ben lekker bezig
In onderstaande code probeer ik een deel van een afbeelding te weergeven, gaat alleen een beetje fout. Whats wrong?

Alvast bedankt!

a.menu2{
    width:172px;
    height:50px;
    overflow:hidden;
    padding:0px;
    float:left;
    background-image:url(img/menu.png) no-repeat 0 0px 0 -142px;
}
a.menu2:hover{
    width:172px;
    height:50px;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:-142px;
    overflow:hidden;
    padding:0px;
    float:left;
    background-image:url(img/menuh.png);    
}

<a class="menu2" href="*"></a>

Op deze website is informatie te vinden hoe je dat menu automatisch, kan laten zien op welke pagina je bent.

Spoiler tonen

http://www.webcheatsheet.com/PHP/get_current_page_url.php
http://www.sebastiansulinski.co.uk/tutorials/show_item/56/active_button_with_php_and_css
http://www.search-this.com/2007/06/13/css-current-page-indicator/ (vraag me af of dit handig is...)
http://webdevjunk.com/coding/css/17/php-menu-includes-with-css-style-to-highlight-active-page-link/

Gewoon een beetje Googlen op:
- active page php css menu
- active page php

Maar als hier iemand een Nederlands talige tutorial van wil maken, zou ik dit prettig vinden. Heb dit alles nog niet uitgetest, zal dit zeker een keer gaan doen, maar heb daar nu geen tijd voor. Dus misschien over anderhalve maand...

@Martijnn : bedankt voor die linkjes, ik had er ook al een paar gevonden maar deze zijn beter Ik ga me er ook eens in verdiepen.

Spyrose schreef:

In onderstaande code probeer ik een deel van een afbeelding te weergeven, gaat alleen een beetje fout. Whats wrong?

een deel van de afbeelding? misschien kun je beter de afbeelding even erbij plaatsen en uitleggen wat je precies wil. Ik snap er nu iig niks van