menu met images als hover-effect

Ik wil een doodgewoon <ul>-menu opleuken met een hover-image-effect. Uiteraard (?) met standaard html en css. Een voorbeeld staat op http://www.kiesbeter.nl

Als je daar over het hoofdmenu [i:0f0b652455]hovered[/i:0f0b652455] krijg je eronder een plaatje te zien.

Hoe doek da?

euh ik weet er niet veel van maar ik dacht dat je dit met javascript kan doen met een onmouseover

<A HREF=“pagina.htm” onMouseover=" hier komt dan dat hij een afbeelding moet tonen (weet even niet meer hou dit moet)"
>link!</A>

//edit
na even zoeken heb ik het gevonden:

<a href=“pagina.htm”
onMouseOver=“document.kieseennaam.src=‘afbeelding1.gif’;”>
link!</a>

dit is de afbeelding die gaat veranderen:
<img src=“afbeelding2.gif” name=“kieseennaam”>

er staat twee keer kieseennaam, dat vervang je door een naam die je aan de afbeelding wil geven (is nodig om de twee stukjes aan elkaar te koppelen). En de afbeeldingen en links verander je natuurlijk ook zodat het bij jouw past. Ja kan beide ook in elkaar steken. Als je dan over de afbeelding gaat veranderd deze. zo dus:

<a href=“pagina.htm”
onMouseOver=“document.kieseennaam.src=‘afbeelding1.gif’;”>
<img src=“afbeelding2.gif” name=“kieseennaam”></a>

ik hoop je hiermee geholpen te hebben
-Sam heijens

Kijk eens in de broncode. Overlaatst is zoiets 2 keer aan bod gekomen in webontw. mijn geheugen laat me in de steek (weeral).

Konijn man! Je moet niet zo veel studeren... word je vergeetachtig van :mrgreen: Volgens mij bedoel je [url=http://www.xs4all.nl/~mosm/testsite/rollover.html]deze![/url]

Komt uit deze topic :wink:

cool, wist niet dat je dit ook kon met css, effe pagina bookmarken

:oops:

Niet goed gezocht!

Ik ga hier mee aan de slag. Ik had al wel op alistapart en zo gezocht, maar kwam er niet echt uit!

Bedankt en voor zo welterusten.

Slim, ik zocht dit effect, heb er veel van gevonden, maar steeds met zoveel overbodige CSS dat ik de essentie maar niet kon vinden. Hiermee moet het inzichtelijk te krijgen zijn. Bedankt

Kan je zoiets nu ook met tekst doen ... dus over plaatje hoveren en dan verschijnt er ergens anders alleen tekst ... of een plaatje met tekst! Zonder javascript dan, hè!

[quote:e92952672f="Syndic"]Konijn man! Je moet niet zo veel studeren... word je vergeetachtig van :mrgreen: Volgens mij bedoel je [url=http://www.xs4all.nl/~mosm/testsite/rollover.html]deze![/url]

Komt uit deze topic :wink:[/quote:e92952672f]

Jip het was deze.
Syndic is nu mijn geheugen :slight_smile:

[quote:f8417c4e64="Syndic"] Volgens mij bedoel je [url=http://www.xs4all.nl/~mosm/testsite/rollover.html]deze![/url] [/quote:f8417c4e64]

Mhmmm… ik moet maar eens een paypal button op die pagina gaan zetten geloof ik :smiley:

Is er behoefte aan een tutorial? Dan kan ik die eens schrijven en hier als sticky posten?

[quote:4283e8cac7="tennapel"][quote:4283e8cac7="Syndic"] Volgens mij bedoel je [url=http://www.xs4all.nl/~mosm/testsite/rollover.html]deze![/url] [/quote:4283e8cac7]

Mhmmm… ik moet maar eens een paypal button op die pagina gaan zetten geloof ik :smiley:

Is er behoefte aan een tutorial? Dan kan ik die eens schrijven en hier als sticky posten?[/quote:4283e8cac7]

Ach, als je daar geld voor gaat vragen ga ik lucht verkopen :stuck_out_tongue:

[quote:06d30e1850="Aracon"][quote:06d30e1850="tennapel"][quote:06d30e1850="Syndic"] Volgens mij bedoel je [url=http://www.xs4all.nl/~mosm/testsite/rollover.html]deze![/url] [/quote:06d30e1850]

Mhmmm… ik moet maar eens een paypal button op die pagina gaan zetten geloof ik :smiley:

Is er behoefte aan een tutorial? Dan kan ik die eens schrijven en hier als sticky posten?[/quote:06d30e1850]

Ach, als je daar geld voor gaat vragen ga ik lucht verkopen :P[/quote:06d30e1850]

What else is new? :innocent:

:x IE is "new". Ook ik heb de handige linkjes gevonden...3x raden IE werkt weer niet mee met de CSS. :x Of ik kan niet goed lezen (bron) of appeltje c werkt niet goed maar alleen in Safari/Firefox Mac werkt het wel.... :cry: Ik word hier zo moe van..... :oops:

Werkt het origineel wel in IE?

Ik heb het voorbeeld op http://www.tekmac.nl/egbertus gedeeltelijk geïmplementeerd. Die werkt ook enigszins in ie/win. Ik moet nog wel even de padding en de margin hacken.

Volgens de W3C-standaarden kun je op alle (in ieder geval) veel CSS-elementen een hover-effect plaatsen. IE/Win doet dit echter niet. Volgens mij alleen bij anchorlinks (a:hover).

[quote:f2b7aaa3da="maccnl"] Volgens de W3C-standaarden kun je op alle (in ieder geval) veel CSS-elementen een hover-effect plaatsen. IE/Win doet dit echter niet. Volgens mij alleen bij anchorlinks (a:hover).[/quote:f2b7aaa3da]

Daar is een oplossing voor die perfect werkt:
http://www.xs4all.nl/~peterned/csshover.html