---

Hej

Jeg vil gerne skifte baggrundsbillede i en TD i menuemnerne.

Jeg har fundet nedenstående script, som virker, men som ikke cacher
billedet, hvorfor der er en pause mellem skiftene.

Jeg har forsøgt mig med nogle preloadingmetoder, men de bliver ignoreret.

Er der en bedre måde end nedenstående?

Mvh
JImmy

<style>
.out { background: transparent url(pics/Button_Off.gif) }
.over { background: transparent url(pics/Button_On.gif) }
</style>


<table>
<tr><td class="out" onMouseOver="this.className='over'"
onMouseOut="this.className='out'" width='150' height='25'>Tekst</td></tr>
</table>

---

Jimmy skrev:

>Jeg vil gerne skifte baggrundsbillede i en TD i menuemnerne.

>Jeg har fundet nedenstående script, som virker, men som ikke cacher
>billedet, hvorfor der er en pause mellem skiftene.

>Er der en bedre måde end nedenstående?


><style>
> .out { background: transparent url(pics/Button_Off.gif) }
> .over { background: transparent url(pics/Button_On.gif) }
></style>
>
>
><table>
><tr><td class="out" onMouseOver="this.className='over'"
>onMouseOut="this.className='out'" width='150' height='25'>Tekst</td></tr>
></table>

Det er ikke den bedste måde, at skifte baggrundsbillede ved at
skifte class, da dom på siden, så skal genopbygges hvergang og
kan være årsag til ventetiden.

Det er bedre at bruge
<style type="text/css">
td { background: transparent url(pics/Button_Off.gif) }
</style>

<table>
<tr><td
onmouseover="this.style.backgroundImage='url(pics/Button_On.gif'"
onmouseout="this.style.backgroundImage='url(pics/Button_Out.gif'"
width='150' height='25'>Tekst</td></tr>
</table>

Husk altid at angive type, når du skirver <style>.

>Jeg har forsøgt mig med nogle preloadingmetoder, men de bliver ignoreret.

En enkel og god måde at preloade billeder med at er at sætte dem
på siden som usynlige billeder.

I din css:
..usynlig {display: none}

<div class="usynlig">
<img src="url(pics/Button_On.gif">
</div>
--
Knud

---

"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> wrote in message
news:7h0gi0l0ij1qt1ilq0ej4ot9val2gq5vuj@dtext.news.tele.dk...

> Det er ikke den bedste måde, at skifte baggrundsbillede ved at
> skifte class, da dom på siden, så skal genopbygges hvergang og
> kan være årsag til ventetiden.
>
> Det er bedre at bruge


klip


Det giver samme resultat hvor billedet loades hver gang.
Jeg har skrevet følgende:

<style type="text/css">
td { background: transparent url(pics/Button_Off.gif) }
.usynlig {display: none}
</style>

<div class="usynlig">
<img src="pics/Button_On.gif">
</div>



<table>
<tr>
<td
onmouseover="this.style.backgroundImage='url(pics/Button_On.gif)'"
onmouseout="this.style.backgroundImage='url(pics/Button_Out.gif)'"
width='150' height='25'>Tekst
</td>
</tr>
</table>


Tak for den hurtige hjælp!

Mvh
Jimmy

---

"Jimmy" <nyhedsgruppe2001@SPAM.yahoo.co.uk> wrote in message
news:41283ea9$0$211$14726298@news.sunsite.dk...

Hej igen

Jeg fik det løst i .webdesign ved at anvende ren CSS til knapperne

Det er nu lidt vildt at de kan komme til at ligne *så* meget.

Tak for hjælpen.

Mvh
Jimmy

---

Knud Gert Ellentoft wrote:
>
> Det er ikke den bedste måde, at skifte baggrundsbillede ved at
> skifte class, da dom på siden, så skal genopbygges hvergang og
> kan være årsag til ventetiden.

Det er jeg ikke helt enig i, for...
....som web-udvikler bør vi tilstræbe os på at adskille indhold, layout
og funktionalitet. D.v.s. adskillelse af (X)HTML, CSS og javascript.

Så jeg mener at Jimmmy gjorde det rigtige, ved at ligge url'en til
billederne ét sted, nemlig i CSS'en.

Skal han på et senere tidspunkt ændre billederne eller have et
alternativt stylesheet, er det kun et sted og ikke flere gange i (X)HTML
koden at det skal ændres.

Derudover kunne man forstille sig at border, font, color o.s.v. også
skulle ændre sig ved mouseover, og så bliver hans event på td elementet
meget lang.

Det er dog rigtig at metoden kan være årsag til ventetid, især hvis der
skal skiftes mellem 2 billeder, men se nedenfor hvordan det kan løses.

>
>>Jeg har forsøgt mig med nogle preloadingmetoder, men de bliver ignoreret.
>
>
> En enkel og god måde at preloade billeder med at er at sætte dem
> på siden som usynlige billeder.
>

Eller have en gif-fil med to billeder i, hvor halvdelen af gif'en vises
ved mouseover/-out. Forskydningen sker ved hjælp af background-position.

Et eksempel på forskydningen kan ses her.
http://www.hintzmann.dk/testcenter/css/hover/default.html

(PS. Jeg ved godt at effekten er lidt dårlig med et så komprimeret
jpeg-billedet, men I kan vel se meningen.)

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/