Avatar billede zentral Nybegynder
07. december 2010 - 18:48 Der er 2 kommentarer og
1 løsning

Billede lacker ved mouseover effekt

Heysa

Jeg har fået et mærkeligt problem med en mouse over effekt i en menu. Selve effekte virker fint, men når siden har stået og hængt/ikke rørt en 10 min, så hakker den når den skal vise effekten igen, som om den skal loade billedet en gang mere tager dog 1-2 sekunder som gør den viser et tomt billede mens den loader.

Jeg har lavet et eksempel for bedre at kunne vise hvad jeg mener.
Her kan i se hvordan det virker lige nu med css.
http://test.zentral.dk

Hvis i ikke har 10 mins tålmodighed så kan i se billedet her som viser hva der sker når man holder musen over et menupunkt efter 10 min.
http://test.zentral.dk/menu.jpg

Billederne som bruges fylder kun omkring 2,5kb.

Nogen gode forslag til hvad man kan gøre for det altid virker ?
Avatar billede webweaver Praktikant
08. december 2010 - 12:36 #1
Den gør det også første gang man benytter sig af menuen her hos mig. En kortvarig hvid firkant indtil hover billedet er loadet.

Har ikke prøvet efter 10 min....

Hvordan er dine stier til grafiken? Eksterne eller interne?

Altså http://www.etellerandet.dk/billede.jpg eller bare billede.jpg?

Prøv med den interne sti? (stien uden www foran) Så skal den ikke hente det ind igen ude fra hvis man kan formulere det sådan.
Avatar billede zentral Nybegynder
08. december 2010 - 12:42 #2
har prøvet begge metoder nu, ude held :(
Css'en kan ses her : http://test.zentral.dk/StyleSheet2.css
Avatar billede discotk Nybegynder
13. januar 2011 - 17:56 #3
Der er findes en løsning til hvordan du kan lave om på dette...
Samle alle dine enkelt stående billeder i et stort billede, og herfra bruge CSS (position) til at finde billedet i det store billede, og udskrive det via en class.

Eks.
//Billede

http://static.ak.fbcdn.net/rsrc.php/zP/r/3lpM16jb1d_.png

//CSS

.stort_billede{background-image:url(http://static.ak.fbcdn.net/rsrc.php/zP/r/3lpM16jb1d_.png
);background-repeat:no-repeat;display:inline-block;height:16px;width:16px}

.ikon1{width:17px;height:17px;background-position:-0px -17px}

//Udskrives

<label><i class="img stort_billede ikon1" title="Dette er Ikon 1"></i></label>


På denne måde skal brugeren ikke hente alle billederne ned hver for sig, hvilket skaber denne forsinkelse.

Et alternativ kunne være at ændre sætte baggrunden til at være grå, så overgangen ikke bliver så markant.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester