Actief
Topic: [CSS] Verwissel image bij hover met css
# Gepost op 27-08-2009 07:25
Bewerkt door vlerknozem op 27-08-2009 07:28
Bewerkt door vlerknozem op 27-08-2009 07:28
Buttons kunnen soms erg handig en mooi zijn op een site. Maar hoe verwissel je nu de image bij een hover? Dit kan natuurlijk met javascript. Maar dit is geen mooie oplossing. Met css kan dit veel makkelijker. Er zijn twee oplossings voor een mooie css hover. Bij de eerste gebruik je twee images, en bij de tweede stop je beide images in een, wat natuurlijk ruimte en laadtijd scheelt.
Eerst gaan we twee hyperlinks maken.
En de css die we voor alle hovers gebruiken (mits de grote van de afbeeldingen overal gelijk is).
Zoals je ziet gebruik ik nu afbeeldingen van 16 bij 16 pixels. Dit zijn de afmetingen van de afbeeldingen die ik gebruik voor de hovers in deze tutorial. Als jou afbeeldingen groter of kleiner zijn moet je dit natuurlijk aanpassen. Als de afmetingen per button kan verschillen zou je de afmetingen kunnen opgeven bij de css per button.
Manier een met twee afbeeldingen
Hier verander je gewoon de image bij de a:hover.
Manier twee met slechts een afbeelding
In dit geval gaan we twee icons in een verwerken. Dit kan gewoon met een programma om foto's te bewerken zoals The Gimp of Photoshop. Liever geen MSPaint want dat kan ten koste van de kwaliteit. Ik gebruik in deze tutorials icons ban 16 bij 16 pixels, en ik ga er nu van uit dat je twee afbeeldingen hebt. Open de afbeelding die je als eerste wilt zien, dus niet de afbeelding die je moet zien bij een hover. Vervolgens vergroot je de canvas naar 16 bij 32 pixels. Op de nieuwe ruimte van 16 bij 16 pixels die je hebt gemaakt komt vervolgens de hover afbeelding.
Als je afbeeldingen groter of kleiner is moet je bij de hover natuurlijk die 16px ook aanpassen. Dit is de hoogte van een afbeelding.
Eerst gaan we twee hyperlinks maken.
En de css die we voor alle hovers gebruiken (mits de grote van de afbeeldingen overal gelijk is).
- .buttons {
- display: block;
- width: 16px;
- height: 16px;
- float: left;
- }
Zoals je ziet gebruik ik nu afbeeldingen van 16 bij 16 pixels. Dit zijn de afmetingen van de afbeeldingen die ik gebruik voor de hovers in deze tutorial. Als jou afbeeldingen groter of kleiner zijn moet je dit natuurlijk aanpassen. Als de afmetingen per button kan verschillen zou je de afmetingen kunnen opgeven bij de css per button.
Manier een met twee afbeeldingen
Hier verander je gewoon de image bij de a:hover.
- #button1 {
- background: url(button1.png);
- }
- #button1:hover {
- background: url(button1_hover.png);
- }
Manier twee met slechts een afbeelding
In dit geval gaan we twee icons in een verwerken. Dit kan gewoon met een programma om foto's te bewerken zoals The Gimp of Photoshop. Liever geen MSPaint want dat kan ten koste van de kwaliteit. Ik gebruik in deze tutorials icons ban 16 bij 16 pixels, en ik ga er nu van uit dat je twee afbeeldingen hebt. Open de afbeelding die je als eerste wilt zien, dus niet de afbeelding die je moet zien bij een hover. Vervolgens vergroot je de canvas naar 16 bij 32 pixels. Op de nieuwe ruimte van 16 bij 16 pixels die je hebt gemaakt komt vervolgens de hover afbeelding. - #button2 {
- background: url(button2.png);
- }
- #button2:hover {
- background-position: 0 16px;
- }
Als je afbeeldingen groter of kleiner is moet je bij de hover natuurlijk die 16px ook aanpassen. Dit is de hoogte van een afbeelding.
Lees de forum regels