Preload af mouseover (hover) billeder

Tags:    html

Hej Alle.

Jeg har lavet et design som er præget af lidt grafik.
Således også en menu, hvor teksten er enkelte billed filer, og hvor den skifter til et andet billede, med en anden farve på teksten når man holder musen over.
Grunden til at jeg har valgt at lave teksten som billeder, er at jeg har en gradient effekt på teksten, som jeg ikke ved hvordan man kan lave i CSS fx. hvis man overhoved kan det.

Som det er nu, når man går ind på siden og gøre musen over menuen, kan man godt lige ane at siden lige skal loade :hover billedet først, og det ser ikke så godt ud at det lige tager et split sekund ekstra. Det er selvfølgelig kun første gang man peger med musen på billedet at den gør den, men stadig irriterende.

Så kan man på nogen måde preloade alle de billeder som kommer frem ved :hover, således at man slipper for at der lige går et split sekund først gang man ellers peger på dem ?



4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 9 karma
Sorter efter stemmer Sorter efter dato
Hej Christian.

Det er faktisk ganske simpelt, og det kan gøres med simpel html & CSS.
Jeg har valgt at tage et eksempel fra min egen side, her er min menu knap

http://www.colossusgaming.com/sites/all/themes/titan2011/graphic/Interface/left-menu/Icons/HomeBtn.png

Som du kan se har jeg alle mine states af knappen på samme billede, altså bliver de alle loaded på samme tid.

Når folk så hover, eller gør den active, så rykker jeg blot på billedet, istedet for at skifte det.

Fold kodeboks ind/udCSS kode 


Fold kodeboks ind/udCSS kode 


Håber det hjalp.



Indlæg senest redigeret d. 09.11.2011 10:56 af Bruger #14816
Jeg vil bare lige nævne at det kaldes for en sprite. Det bliver brugt utrolig meget også for load tiderne så det er et stort billede som hentes og ikke en masss små. Du kan fx se hvor avanceret facebook har gjort det her.



Hej Martin.

Ja det hjalp, tak.

Det er sådan en løsning man ikke selv kommer på, hvis ikke man kender til teknikken, men det giver jo god mening.
Når nu jeg tænker mig om, har jeg set andre lave dropdown menuer på samme måde :)





Du er velkommen :).

Det har du ret i, det er en god metode, specielt hvis man ikke vil blande javascript ind i det.



t