• Home
• Archief
• Contact
• Inhoudsopgave

Snel hover menuknop laden, de alternatieve wijze

1. Er zijn een paar manieren om css menuknoppen die uit plaatjes bestaan te laden. Manier 1 is om de hoverstate-plaatjes over internet te laten komen als je muis over een knop gaat. Deze manier is fouteboel.... veelste traag. Dit moet je eigenlijk niet willen.

2. Een andere manier is het hover-plaatje samen met het link-plaatje in 1 image te zetten en die zo te positioneren, met "background-position" zodat ie bij de hoverstatus opschuift.(bijv 1 knoplengte naar links). Da's wel goed, maar een manier met veel gedoe.

3. Maar er is nog een manier en die bevalt me prima (tot nu toe).
Wat je doet is van de plaatjes in je menu code maken en die code in je (externe) css file zetten. Hiervoor installeer je een Firefox add-on genaamt Base64 Encoder.
Deze komt te staan in je Firefox-menu onder: - extra - Base64 Encoder (onderaan). Klik - select file - selecteer je knopplaatje - en copy to clipboard.

Vervolgens plak je de code in je css file, zoiets als hieronder:
background-image:url('data:image/png;base64,iVBORw0KGgo etc. etc.');

Ik heb de werking getest in Firefox 3.6.10, IE8, Safari en Chrome 6.0.472.62
De bestanden ook geupload, browser cache geleegd, en het werkt supersnel, geen enkele vertraging bij het mouseover/hover-plaatje.
IE7 gebruikers hebben in dit geval wel pech want IE7 ondersteunt Base64 niet en een (ook werkende) fix heb ik niet kunnen vinden.
Je zou de methode 1 kunnen gebruiken alleen voor IE7. Dus background-image:url('../img/btn1.png'); gewoon onder de andere background-image: zetten.

Wat je natuurlijk niet moet vergeten is je plaatjes te bewaren.
Het werkt zelfs met geanimeerde gifjes.
Geweldig toch?

Reageer (1) 18.09.2010. 20:47