Avatar billede madsmm Nybegynder
10. maj 2004 - 21:31 Der er 10 kommentarer og
1 løsning

Skifte et baggrundsbillede i en div

Hejsa,

Jeg har en masse <div class=MenuDiv id=div1></div> .. <div class=MenuDiv id=divN></div>

Som har et baggrundsbillede i sig, men når jeg kører musen hen over vil jeg gerne have at når musen kører hen over skal den ikke længere have background-image:url('gfx/menuitem-bg.gif'); men derimod background-image:url('gfx/menuitem-bg-ON.gif'); og så skifte tilbage igen når man fjerner musen...

Jeg har fået det til at spille, men det hakker og der går lidt tid før onmouseover billedet bliver synligt, så nu har jeg brug for hjælp til at lave det perfekt script til det - som virker i alle browsere..

På forhånd tak!
Avatar billede roenving Novice
10. maj 2004 - 22:06 #1
Hvordan gør du da nu ?-)

-- og virker det i 'alle' browsere ...
Avatar billede madsmm Nybegynder
10. maj 2004 - 22:13 #2
function changeBG(lmnt, on) {
    if (on)
        lmnt.style.background="url('gfx/on.gif')";
    else   
        lmnt.style.background="url('gfx/menu-bg')";
}

det virker ... men ikke godt
Avatar billede roenving Novice
10. maj 2004 - 22:19 #3
Hvor store er dine giffer, for der kan zq nok ikke gøres ret meget anderledes for at optimere koden ...

I de gamle IE'er kunne man preloade, men det ser ud som om, der er ændret i den måde den henter billeder i de nyere versioner ...
Avatar billede madsmm Nybegynder
10. maj 2004 - 22:20 #4
1.5kb pr styk...
Avatar billede roenving Novice
10. maj 2004 - 22:31 #5
Hvordan kører det f.eks. i Mozilla ?-)
Avatar billede Slettet bruger
10. maj 2004 - 22:52 #6
Der er faktisk en metode, som ikke bruger javascript, og som ikke kræver preload. Den er beskrevet på http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

NB! Du bør også se den opdaterede udgave, der er linket til nederst på siden, da IE ellers laver noget grimt blinken.
Avatar billede roenving Novice
10. maj 2004 - 23:04 #7
>>sandbox

Der skal nogen gange nogen krøllede tanker for at løse dumme problemer !-)

-- men det oprindelige billede flimrer dog en anelse, når det ikke længere er transparent, men det er dog en voldsom forbedring ...
Avatar billede olebole Juniormester
14. maj 2004 - 18:40 #8
<ole>

En tilsvarende fremgangsmåde anvender den editor-komponent, der hedder 'ace.htc' (f.eks. brugt her: http://www.hivedemo.com/compose.email.php ).
Her sker ingen image-swaps, men ét stort billede med ikoner flyttes rundt i spans med et clip.
For den nysgerrige ligger billedet her: http://www.hivedemo.com/misc/ace.gif

Udmærket løsning i visse situationer  ;o)

/mvh
</bole>
Avatar billede roenving Novice
15. maj 2004 - 20:43 #9
Fundet i min mailbox:

Kommentar fra madsmm, Tuesday, May 11, 2004 9:50:15 AM:

sandbox> tak for hjælpen.. det lader til at spille som det skal..

hvis du poster et svar så er der 200 gode points at varme sig på her i sommervarmen :)
Avatar billede Slettet bruger
15. maj 2004 - 21:00 #10
Så må jeg jo heller lægge et svar - selvom 200 nu er noget rigeligt...

madsmm: Jeg synes du skal beholde de fleste af pointene selv. 15-30 point ville være mere passende.
Avatar billede madsmm Nybegynder
16. maj 2004 - 09:25 #11
Nu fik du dem alle alligevel... jeg blev så glad for svaret så du har fortjent dem ;)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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