/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Skifte baggrundsbillede i en TD
Fra : Jimmy


Dato : 22-08-04 01:28

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>




 
 
Knud Gert Ellentoft (22-08-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 22-08-04 03:27

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

Jimmy (22-08-2004)
Kommentar
Fra : Jimmy


Dato : 22-08-04 07:38


"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 (23-08-2004)
Kommentar
Fra : Jimmy


Dato : 23-08-04 10:25


"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



Martin Hintzmann And~ (22-08-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 22-08-04 13:51

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/

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408925
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste