CSS gfx hovers
Door Jan Koehoorn, 19 jaar geleden, 5.455x bekeken
De juiste manier om image hovers te implementeren
Gesponsorde koppelingen
Inhoudsopgave
Er zijn 16 reacties op 'Css gfx hovers'
0 
-0 
-0
Wat je ook gewoon kan doen is je plaatjes laden in een ontzichtbare div.
0 -0
-0
@Mitchell
Dat is ook niet slim, je schrijf dan meer code dan nodig is. Een onzichtbare div waarin je die afbeeldingen "preload" is niet helemaal ideaal dacht ik zo. Daarnaast is het niet netjes als je meer HTML schrijft dan nodig is.
@Jan
Dit is inderdaad de juiste manier om dit op een zo eenvoudig mogelijke manier te bereiken. Enig nadeel kan zijn (bij grotere afbeeldingen) dat tijdens het laden het effect standaard zichtbaar is.
Dat is ook niet slim, je schrijf dan meer code dan nodig is. Een onzichtbare div waarin je die afbeeldingen "preload" is niet helemaal ideaal dacht ik zo. Daarnaast is het niet netjes als je meer HTML schrijft dan nodig is.
@Jan
Dit is inderdaad de juiste manier om dit op een zo eenvoudig mogelijke manier te bereiken. Enig nadeel kan zijn (bij grotere afbeeldingen) dat tijdens het laden het effect standaard zichtbaar is.
0 -0
-0
@ Robert
Voor deze oplossing heb je bij iedere anchor zo en zo een extra div nodig. Die heb je niet nodig als je gewoon een onzichtbare div maakt met al die images er in. Naar mijn mening is mijn manier beter, maarja. Ieder zijn voorkeur. :)
Voor deze oplossing heb je bij iedere anchor zo en zo een extra div nodig. Die heb je niet nodig als je gewoon een onzichtbare div maakt met al die images er in. Naar mijn mening is mijn manier beter, maarja. Ieder zijn voorkeur. :)
0 -0
-0
Ik ben het eens met Mitchell. Onzichtbare div werkt prima.
beter dan al die regels extra code.
beter dan al die regels extra code.
0 -0
-0
Quote:
Voor deze oplossing heb je bij iedere anchor zo en zo een extra div nodig
Wat in de praktijk natuurlijk het meest voorkomt, is dat je bijvoorbeeld een grafisch menu hebt, of een serie buttons naast elkaar. Dan hoef je er maar 1 div omheen te zetten en kun je met child selectors aan de gang. Het valt dus wel mee met "al die regels extra code" en semantisch gezien is het een veel betere oplossing.
0 -0
-0
@Mitchel
Ik zeg ook niet dat die onzichtbare div niet werkt, maar het is geen nette oplossing. Daarnaast moet je bij veelvuldig gebruik van zo'n hover met afbeeldingen ook veelvuldig divs aanmaken waar je die afbeeldingen in laat preloaden. Niet helemaal handig lijkt me.
Ik zeg ook niet dat die onzichtbare div niet werkt, maar het is geen nette oplossing. Daarnaast moet je bij veelvuldig gebruik van zo'n hover met afbeeldingen ook veelvuldig divs aanmaken waar je die afbeeldingen in laat preloaden. Niet helemaal handig lijkt me.
0 -0
-0
De "sliding doors" techniek kan ik aanraden. Het is soms wat lastig (in de zin van: denk creatief) maar je hebt geen extra divs nodig. Daarnaast kan je alle states in ??n plaatje houden, wat weer een paar requests bespaart.
En dat kan je dan nog combineren met css sprites, waardoor je een heel menu, met de hover-state en de click-state en de visited-state en welke andere state je dan ook nog mag hebben in ??n bestand kan stoppen. Zonder extra divs.
En dat kan je dan nog combineren met css sprites, waardoor je een heel menu, met de hover-state en de click-state en de visited-state en welke andere state je dan ook nog mag hebben in ??n bestand kan stoppen. Zonder extra divs.
0 -0
-0
@ Robert
Waarom meerdere divs aanmaken als je ze allemaal in 1 div kunt gooien ergens bovenin de body?
@ Jelmer
Dat is inderdaad een goede techniek, maar moeilijk toe te passen af en toe.
@ Jan
Klopt, het komt vaak voor dat je een div om een anchor gooit, maar voor jou stukje code mag je die div dan vervolgens niet ergens anders meer voor gebruiken. Technisch gezien dus een anchor op een anchor.. P:
Waarom meerdere divs aanmaken als je ze allemaal in 1 div kunt gooien ergens bovenin de body?
@ Jelmer
Dat is inderdaad een goede techniek, maar moeilijk toe te passen af en toe.
@ Jan
Klopt, het komt vaak voor dat je een div om een anchor gooit, maar voor jou stukje code mag je die div dan vervolgens niet ergens anders meer voor gebruiken. Technisch gezien dus een anchor op een anchor.. P:
0 -0
-0
@Jan, maak de pagina nog even valid door de div buiten de <p> te zetten :) verder gebruik ik hem ook vaak op deze manier
0 -0
-0
@Mitchel
Omdat het cachen van CSS anders gaat dan van HTML misschien? Het zou erg zonde zijn om op elke pagina (of bij elke refresh) weer al die afbeeldingen op te halen, css wordt iig qua afbeeldingen goed gecached.
Als je bedoeld om alles in een background-image('') te zetten, dan kan je dat ook toepassen binnen de div waarin de afbeelding moet komen. Ik zie in elk geval de toevoeging van die div niet.
Omdat het cachen van CSS anders gaat dan van HTML misschien? Het zou erg zonde zijn om op elke pagina (of bij elke refresh) weer al die afbeeldingen op te halen, css wordt iig qua afbeeldingen goed gecached.
Als je bedoeld om alles in een background-image('') te zetten, dan kan je dat ook toepassen binnen de div waarin de afbeelding moet komen. Ik zie in elk geval de toevoeging van die div niet.
0 -0
-0
Nog een idee, wat echt maar 1 plaatje nodig heeft. Geen overbodige html etc is het volgende:
positioneren van het plaatje.
Voordelen:
+ 1 afbeelding (met daarop 2 nagenoeg dezelfde afbeelding)
+ geen overbodige html/css-declaraties
+ snel, wat alleen positie verschuif je
Nadelen:
- max-width moet opgegeven worden
Voorbeeld: www.hervormdsliedrecht.nl >> rode ster linksboven
Afbeelding: http://www.hervormdsliedrecht.nl/layout/titelbalk_dubbel.jpg
De construtie daar is wel geinig: een div met achtergrond met daarin een afbeelding.
Die afbeelding is visiblity: hidden, de div krijg een achtergrond.
Een hover op de achtergrond verschuift dus het achtergrondplaatje-positie.
Werkt (nog niet) in IE6, maar anderen wel.
Met cursur: pointer; krijg je mooi een handje te zien.
De link blijft werken, want de <img> in de <div> heeft een link.
positioneren van het plaatje.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Voordelen:
+ 1 afbeelding (met daarop 2 nagenoeg dezelfde afbeelding)
+ geen overbodige html/css-declaraties
+ snel, wat alleen positie verschuif je
Nadelen:
- max-width moet opgegeven worden
Voorbeeld: www.hervormdsliedrecht.nl >> rode ster linksboven
Afbeelding: http://www.hervormdsliedrecht.nl/layout/titelbalk_dubbel.jpg
De construtie daar is wel geinig: een div met achtergrond met daarin een afbeelding.
Die afbeelding is visiblity: hidden, de div krijg een achtergrond.
Een hover op de achtergrond verschuift dus het achtergrondplaatje-positie.
Werkt (nog niet) in IE6, maar anderen wel.
Met cursur: pointer; krijg je mooi een handje te zien.
De link blijft werken, want de <img> in de <div> heeft een link.
Edit:
Ik zie dat Jelmer dit idee ook al aanhaalde, met zijn Sliding Doors.
Ik zie dat Jelmer dit idee ook al aanhaalde, met zijn Sliding Doors.
0 -0
-0
Sliding doors kan ook inderdaad, en achtergrond laten verschuiven kan ook. Dit is gewoon een extra techniek. Die anderen zijn lastiger om crossbrowser te krijgen, vooral in IE6.
0 -0
-0
Ik gebruik css-sprites. Alle afbeeldingen in een afbeelding zetten en met behulp van background-position deze op de juiste plaats zetten.
Het lukt niet overal, bijv bij repeterende achtergrondafbeeldingen.
Het lukt niet overal, bijv bij repeterende achtergrondafbeeldingen.
0 -0
-0
Lijkt me een goede techniek. Alleen ik vraag me af of het makkelijk in te passen is als je de links naar de plaatjes uit een database wil halen.
Is daar een slimme oplossing voor?
Is daar een slimme oplossing voor?
0 -0
-0
Ik ben voorstander van de manier dat Eddy Erkelens omschrijft en vind die persoonlijk veel beter dan de methode van Jan Koehoorn
0 -0
-0
Nadeel van het voorbeeld dat Eddy geeft is wel (en dat heb je bij Jan niet) dat je de breedte van de helft van de afbeelding moet opgeven. 1px te veel en het ziet er niet goed meer uit. Alle afbeeldingen van eenzelfde class moeten in dat opzicht op de pixel nauwkeurig even breed zijn. Bij de methode van Jan is dat niet nodig, met visibility:hidden; blijft namelijk de breedte van de bovenste afbeelding de breedte van de div.
Dat is dan wel eenvoudiger in gebruik lijkt mij zo.
Dat is dan wel eenvoudiger in gebruik lijkt mij zo.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu