OnMouseOver - skift BG-image uden at vise hvidt felt foerst.

Syntes engang jeg har hørt en vis mand snakke noget om at hvis du ændrer klasse navnet på et element skal browseren læse hele DOM træet igen **BLINK**..

Derfor nøjes med at ændre background-image..

Men CSS er jo selvfølgeligt at foretrække, smid et <a> i "elementet" med display:block;height:100%;width:100%; og smid bg billeder på gennem CSS og CSS:Hover..

<ole>

At klasseskift er en tuuuung mother, er helt sikkert ... sagde 'manden'  ;o)

Om CSS er at foretrække i den slags situationer, kan nu også diskuteres. En meget væsentlig del af W3C's arbejde går på at få os til at adskille følgende dele af en webside:
1) data
2) markup
3) visuel præsentation
4) funktionalitet

Om CSS er logisk at bruge, afhænger således af, om man opfatter en præsentations ændring - som følge af en brugerhandling - som 'funktionalitet' ... eller som ren 'visuel præsentation'.
Netop fordi, der er tale om en ændring, der sker som følge af en brugerhandling, er jeg personligt mest tilbøjelig til at betragte ændringen som hjemmehørende under 'funktionalitet' ... og den debat har såmænd også raset internt i W3C.

Det kan således både løses med JavaScript (hvad jeg personligt ville foretrække) og med CSS. Hvordan det præcist skal gøres, afhænger dog i begge tilfælde af den specifikke kode  :)

/mvh
</bole>

jokkejensen > Vil det goere en foreskel hvis jeg saetter det paa et td med OnMouseOver og OnMouseOut, men saa skrev direkte i koden hvilke billeder der skal skiftes til?

- det vil det sikkert, men det afhænger stadig af den aktuelle kode, hvordan det smartest realiseres  :)

hehe Ole.. du husker godt :)..

JEg kan personligt slet ikke forstå at man skal bruge JS til at lave en hover effekt med et baggrundsbillede.. CSS er da meget lettere..

Men det er bedst kun at ændre this.style.backgroundimage om det er en td eller hvad er ligegodt. :

http://www.google.dk/search?hl=da&q=this.style.backgroundimage&meta=

Nu har jeg sat et <A> med display:block;height:100%;width:100%; og nu er min tekst blevet flyttet op i toppen af cellen saa hvordan faar vi lige aendret det?

Jeg vil have teksten til at staa i center verticalt, men valign="center" virker ikke, saa jeg gaar ud fra at jeg skal bruge noget padding eller noget.

Ja det er rigtigt det er lidt et problem..

Ja du kan altid sætte padding på dit <a> .. padding-top: xxPx; ... men problemet er mere hvis der nu lige pludselig var et <a> der fuldte 2 linier, så vil det ikke stå vertikalt længere ? er dette et problem..

Line-height: er måske bedre til dit a :).

-- jeg ville på linje med ole foretrække at bruge onmouseover/-out-events og dermed javascript i denne situation, altså f.eks.

<td style="background-image:url(baggrund.gif);" onmouseover="this.style.backgroundImage='baggrund_over.gif';" onmouseout="this.style.backgroundImage='baggrund.gif';">

jokkejensen >> Ja, jeg husker okay. Klæbehjerne er måske så meget sagt - men fedtet hår er der nok lidt af (og da roenving jo har set mig irl, må jeg hellere selv sige, at der nok er mere fedt end hår tilbage)  ;o)

Derudover er jeg ganske enig i, at CSS's 'hoover' er let at bruge - omend den endnu kun er X-browser understøttet for links. For mig virker det bare mere logisk at foretage den slags ændringer med script ... jævnfør den opdeling, jeg henviste til ovenfor  :)

Nu ville det nok være dumt at starte en diskussion når i er så skide enige.. :)

Men jeg forsøger personligt at lave alt det der er muligt med CSS og "resterne" med JS..

Og forbinder klart rollover images med visual præsentation, hvis det absolut skal sættes i bås. :)

Mvh

- og jeg opfatter ændringer i skærmbilledet - som følge af brugerhandlinger - som værende funktionalitet ... om det så er en rollover, drag/drop af elementer, klikke på en knap og skifte baggrundsfarve ... men det er en grænse, der er rigtig mange meninger om  ;o)

Naar jeg bruger <td style="background-image:url(baggrund.gif);" onmouseover="this.style.backgroundImage='baggrund_over.gif';" onmouseout="this.style.backgroundImage='baggrund.gif';">
Saa kommer der stadig det hvide blink, som jeg gerne vil undgaa, saa kan i klare en preload funktion?

- formodentlig kun i IE, som vistnok insisterer på at hente baggrundsbilleder fra serveren - i stedet for fra cachen.
Hvor meget fylder billedet ... i kb?

En preloader ser f.eks. sådan ud:

<script type="text/javascript">
var imgs = ["baggrund.gif","baggrund_over.gif"];
var pic = new Array();

for(i=0;imgs.length>i;i++){
  pic[i] = new Image();
  pic[i].src = imgs[i];
}
</script>

-- men som ole nævner, så insisterer IE på, at den skal undersøge, om der er en nyere udgave af også et billede, hvis man har browseren indstillet til altid at hente nyeste udgave af html-dokumenter !-)

Igen en smagssag om man skal bruge JS til noget man så let kan gøre med html..

<div style="display:none">
<img src="xx" alt="" />
</div>

:)

Det kan godt være jeg er helt gal på den og det er forkert.. men den virker i hvert fald til brugere der ikke har JS aktiveret... hvis der skulle være nogen :)

Tjah, den største fordel ved at bruge js er, at man ikke behøver at fylde html-koden op, men jeg tror det fungerer præcist ens, om man indlægger et skjult billede eller opretter et Image-objekt og indlæser en source !-)

-- dog vil det ikke være sikkert, at browseren indlæser et billede i et skjult område ...

Den nederstaaende kode retunere en fejl naar jeg koerer scriptet, for jeg faar den gule trekant i processlinien, og der bliver ikke skiftet billede, naar jeg foerer musen over det.

<td style="background-image:url(baggrund.gif);" onmouseover="this.style.backgroundImage='baggrund_over.gif';" onmouseout="this.style.backgroundImage='baggrund.gif';">

Uff, der mangler jo også et par væsentlige detaljer:

<td style="background-image:url(baggrund.gif);" onmouseover="this.style.backgroundImage='url(baggrund_over.gif)';" onmouseout="this.style.backgroundImage='url(baggrund.gif)';">

Jeg brugte denne kode til selve feltet:
<td style="background-image:url(baggrund.gif);" onmouseover="this.style.backgroundImage='url(baggrund_over.gif)';" onmouseout="this.style.backgroundImage='url(baggrund.gif)';">

Og denne kode til at preloade billederne, saa det hvide blink ikke kommer:
<div style="display:none">
<img src="xx" alt="" />
</div>


Saa det er vel jokkejensen og roenving der deler pointene, saa send et svar.

Send svar?

Oki '-)

Takker :)

-- og tak for point ;~}