hover effekt på td

<td style="background-image:url('img1.jpg')" onmouseover="this.style.backgroundImage=url(img2.jpg)" onmouseout="this.style.backgroundImage=url(img1.jpg)">

Hov:

<td style="background-image:url('img1.jpg')" onmouseover="this.style.backgroundImage='url(img2.jpg)'" onmouseout="this.style.backgroundImage='url(img1.jpg)'">

Det bør/kan løses med CSS

Du skal lige bruge en behavior til ie6, mener en google på IE6 whatever:hover finder den.

/JJ

Det kan, men jeg mener ikke, det er særlig hensigtsmæssigt. Det var oprindelig kun ment, at hover i CSS skulle fungere på a-tags og ikke på nogen andre.

:link og :visited er ja..

Men de fleste psuedo klasser er understøttet af alle elementer, :before :after :hover osv.. Bare ikke i IE6, men det er heldigvis ikke IE6 standarderne sættes efter.

/JJ

Alt i alt er det et spørgsmål om man vil have noget rodet markup, eller skubbe det ud i JS eller CSS, og her ser jeg det meget lettere med CSS... Det skal i hvert flad ikke ligge inde som en attribt på tagget.

/J

Ja, det er altid en fordel at have det ekstern og mindste mark-up koden mest muligt.

Det kan godt være, du har ret i det med :hover .

Bare for sjov, så kunne en ekstern JS-løsning se sådan her ud:
-------------------------------------------
...
<td class="hejfordig">...</td>
...

<script type="text/javascript">
function ToggleBG(o,sType){
    o.style.backgroundColor=sType=="over"?"img1.jpg":"img2.jpg"
}

var sClass="hejfordig";var aElm=document.getElementsByTagName("td")[0],i=aElm.length;
do{
    if(aElm[i].getAttribute("className")!=sClass&&aElm[i].getAttribute("class")!=sClass)break;
    aElm[i].onmouseover=function(){ToggleBG(aElm[i],"over")};aElm[i].onmouseout=function(){ToggleBG(aElm[i])}
}while(i--)</script>
-------------------------------------------
Eller hvis man ikke har noget imod at skulle sætte onmouseover og onmouseout:
-------------------------------------------
...
<td onmouseover="ToggleBG(this,'over')" onmouseout="ToggleBG(this)">...</td>
...

<script type="text/javascript">
function ToggleBG(o,sType){
    o.style.backgroundColor=sType=="over"?"img1.jpg":"img2.jpg"
}
</script>
-------------------------------------------
Og så er det jo klart at én linje CSS er at foretrække.
Dog ville jeg hellere bruge min løsning nr. 2 her, hvis CSS-metoden ikke er valid.

CSS metoden er valid, de bruger det eksempelvis meget på alistapart til deres dropdown menuer.. de omtaler også IE<=6 problematikken..

Jeg kan ikke lige bekræfte at standarderne overholdes, men jeg kan bekræfte at det understøttes af alle moderne browsers :)

/JJ

webber89>> Lukketid?