CSS gfx hovers

Door Jan Koehoorn, 14 jaar geleden, 3.135x bekeken

De juiste manier om image hovers te implementeren

Gesponsorde koppelingen

Inhoudsopgave

  1. CSS gfx hovers

 

Er zijn 16 reacties op 'Css gfx hovers'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Mitchell
Mitchell
14 jaar geleden
 
0 +1 -0 -1
Wat je ook gewoon kan doen is je plaatjes laden in een ontzichtbare div.
Robert Deiman
Robert Deiman
14 jaar geleden
 
0 +1 -0 -1
@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.
Mitchell
Mitchell
14 jaar geleden
 
0 +1 -0 -1
@ 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. :)
Toby hinloopen
toby hinloopen
14 jaar geleden
 
0 +1 -0 -1
Ik ben het eens met Mitchell. Onzichtbare div werkt prima.
beter dan al die regels extra code.
Jan Koehoorn
Jan Koehoorn
14 jaar geleden
 
0 +1 -0 -1
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.
Robert Deiman
Robert Deiman
14 jaar geleden
 
0 +1 -0 -1
@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.
Jelmer -
Jelmer -
14 jaar geleden
 
0 +1 -0 -1
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.
Mitchell
Mitchell
14 jaar geleden
 
0 +1 -0 -1
@ 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:
Terence Hersbach
Terence Hersbach
14 jaar geleden
 
0 +1 -0 -1
@Jan, maak de pagina nog even valid door de div buiten de <p> te zetten :) verder gebruik ik hem ook vaak op deze manier
Robert Deiman
Robert Deiman
14 jaar geleden
 
0 +1 -0 -1
@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.
Eddy E
Eddy E
14 jaar geleden
 
0 +1 -0 -1
Nog een idee, wat echt maar 1 plaatje nodig heeft. Geen overbodige html etc is het volgende:

positioneren van het plaatje.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// HTML
<a href="link.php" class="hovermij">

// CSS
a.hovermij
    {
    display: block;
    height: 200px; /* hoogte plaatje */
    max-width: 100px; /* breedte link.. plaatje is dus 200px breed */
    background: url('plaatje.jpg') top left no-repeat;
    }

a.hovermij:hover
    {
    background-position: top right;
    }

?>


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.
Jan Koehoorn
Jan Koehoorn
14 jaar geleden
 
0 +1 -0 -1
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.
Niek Weevers
Niek Weevers
14 jaar geleden
 
0 +1 -0 -1
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.
Chris Avontuur
Chris Avontuur
14 jaar geleden
 
0 +1 -0 -1
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?
Jelle -
Jelle -
14 jaar geleden
 
0 +1 -0 -1
Ik ben voorstander van de manier dat Eddy Erkelens omschrijft en vind die persoonlijk veel beter dan de methode van Jan Koehoorn
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Robert Deiman
Robert Deiman
14 jaar geleden
 
0 +1 -0 -1
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.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. CSS gfx hovers

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.