[css] rollover afbeeldingen

[Verwijderd]

Ik heb dus mijn menu gepositioneerd met css en het zijn allemaal afbeeldingen, als je erover gaat moet de rollover afbeeldingen iedere keer de zelfde afbeelding zijn maar met de prefix van over_. Kan ik dit in css in 1 keer plaatsen, of komt hier js aan te pas?

[Verwijderd]

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

[T-MOB]

Anne's link is de goeie! (wie had anders verwacht )

Zoals ik het begreep wil je in normale staat verschillende plaatjes en in hover staat allemaal dezelfde. Om bandbreedte te besparen kun je de hoverstaat dan alleen in je eerste plaatje opnemen.

code:

#button1 { background: url(button1.png) top left; }
#button2 { background: url(button2.png); }
...etc...

.button:hover { background: url(button1.png) 0 -30px; }

Dat idee...

[ Voor 4% gewijzigd door T-MOB op 12-04-2004 12:34 . Reden: Verschillende / dezelfde - voor het nageslacht TS bedoelde toch wat anders... ]

[Verwijderd]

sorry, ik begrijp die link niet zo goed. Ik snap niet wat je prcies bedoelt daarmee. Kan je wat uitgebreider zijn in je uitleg. Ik ben namelijk niet zo gevorderd als jullie

[Verwijderd]

Het zou handig zijn als je aangaf welk gedeelte je niet snapte. Heb je de code al zelf uitgetest? Een aantal properties veranderd en bekeken wat het effect was op de huidige pagina?

[Verwijderd]

waarom je met een background werkt zou ik graag om te beginnen eens weten.
dit is mijn menu (nog zonder de links)
<div id="menutop">[img]"images/knoppen/menu.gif"[/img]</div>
<div id="menunews">[img]"images/knoppen/origineel/news.gif"[/img]</div>
<div id="menumembers">[img]"images/knoppen/origineel/members.gif"[/img]</div>
<div id="menugigs">[img]"images/knoppen/origineel/gigs.gif"[/img]</div>
<div id="menupictures">[img]"images/knoppen/origineel/pics.gif"[/img]</div>
<div id="menumusic">[img]"images/knoppen/origineel/music.gif"[/img]</div>
<div id="menucontact">[img]"images/knoppen/over/over_contact.gif"[/img]</div>
en dit is mijn css bestand
body {
background-color:850000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
img{
border: no;
}
#menutop {
position:absolute;
top: 3 px;
left: 20 px;
}
#menunews{
position:absolute;
top: 81 px;
left: 20px;
}
#menumembers{
position:absolute;
top: 116 px;
left: 20px;
}
#menugigs{
position:absolute;
top: 152 px;
left: 20px;
}
#menupictures{
position:absolute;
top: 188 px;
left: 20px;
}
#menumusic{
position:absolute;
top: 222 px;
left: 20px;
}
#menucontact{
position:absolute;
top: 256px;
left: 20px;
}
hopelijk geraak je er wijs uit en kan je me wat verder helpen zo

[Verwijderd]

Plaats liever een link. Daarnaast lijkt dit weer zo'n typisch geval te zijn van "ik weet het beter" aangezien je gewoon feilloos alles wat in de link wordt uitgelegd negeert en gewoon doorgaat met je eigen bouwsel. (Dat is dus niet de bedoeling.)

Pas het is aan en probeer te begrijpen hoe ze het daar doen.

[Verwijderd]

maar ik snap niet waarom ze met background beginnen te werken, ik negeer het niet, het komt er gowoon op neer dat ik de werkwijze niet snap, mijn engels is allesinds niet zo goed. ik snap hun redenering niet, als je die kan uitleggen zou ik al veel gehopen zijn
en ik wil het niet beter weten, zeker niet.

[T-MOB]

Ze gebruiken een background-image omdat die met CSS makkelijk te veranderen is. Een inline image verander je (op zijn minst makkelijker) met Javascript.

[-Mous-]

Misschien is het handig om er bij te zeggen dat de background verandert en dat de bovenliggende tekst dus niet verandert.

Met andere woorden: de tekst zit niet in het plaatje maar er op. Als je dan over de link heen gaat verandert de CSS je background-image en heb je een mooie roll-over.

Je zal dan alleen wel netjes je links moeten positioneren, zodat de achtergrond er netjes achter komt.

[Verwijderd]

Zonder "pure" tekst kan ook gemakkelijk hoor: The Art of Navigation.