Hallo,


Voor mijn website wil ik gebruik maken van mouseover buttons. Ik weet dat dit op een simpele manier kan met css. Het moet er namelijk als volgt uit zien:


http://www.bj-media.nl/mouseover.png


Zoals je hierboven ziet zijn het normaal witte buttons (als achtergrond) en bij de mouseover moet deze licht naar grijs zijn (dat is gewoon een plaatje).


Ik wil niet moeilijk doen door het huisje en de tekst en de button apart te slicen. Ik wil ook niet voor iedere button een aparte css opmaak hebben. Zou iemand mij daarom kunnen vertellen hoe ik dit simpel zou kunnen oplossen?


Bij voorbaat dank.

Ik wil niet moeilijk doen door het huisje en de tekst en de button apart te slicen. Ik wil ook niet voor iedere button een aparte css opmaak hebben. Zou iemand mij daarom kunnen vertellen hoe ik dit simpel zou kunnen oplossen?

wat jij wenst lukt naar mijn bescheiden niet,
je MOET een aparte a:hover image maken voor ELKE button,
je MOET voor iedere button 2 bg-image versies maken...

Origineel gepost door Edwin P.

wat jij wenst lukt naar mijn bescheiden niet,
je MOET een aparte a:hover image maken voor ELKE button,
je MOET voor iedere button 2 bg-image versies maken...

Oké, dat dacht ik dus eigenlijk ook al. Ook al had ik misschien een idee dat het nog anders zou kunnen.

Bedankt.

Je kunt een achtergrond afbeelding 1 keer maken met de gradient. Deze laat je on de mouseover veranderen.

De afbeeldingen daar voor zijn transparante gifs of png. Op die manier hoef je maar achtergrond afbeelding te maken die veranderd moet worden op de muisover.

je kan inderdaad de <a> tag een mouseover background geven, en het plaatje (transparante png) er in zetten, hetzelfde geld voor de tekst. Let er wel op dat je de <a> een mouseover geeft en niet de <li>, de mouseover in een <li> element werkt namelijk niet in IE6

Waarom maak je er geen sprite van? En dan background-postion:200px 10px;..

op die manier gebruik je 1 plaatje, wat je doet is simpel;

Je maakt van al je afbeeldingen 1 plaatje,

je zorgt ervoor dat bijv. de bovenste rij bestaat uit al je normale afbeeldingen, en daaronder al je onmouseover afbeeldingen.

Het enige wat je dan hoeft te verplaatsen is de background van dat item;

dus: li a:hover {
background-position: -200px 40px; ( wederom voorbeeldje.. )

Als je dit doet voor als je items, scheelt je dat type werk, en ben je ook je pagina sneller aan het maken, immers 10 plaatjes tov. 1 groot plaatje is sneller omdat je veel minder http headers verstuurt.