I'm attempting to use some inline JavaScript to dynamically alter the CLASS of an image so that is changes when the image is hovered over.

Here's my stylesheet elements (simplified for testing purposes)...

.ssb img {
    background-color: #f00;
}
.ssb_hov img {
    background-color: #0f0;
}

And here's the code (I've replaced the rather long urls with "[URL]" to make it more readable...

<a  href="[url]" class="ssb" rel="nofollow"  onmouseover="document.getElementById('delicious_4546').className='ssb_hov';"   onmouseout="document.getElementById('delicious_4546').className='ssb';">
<img src="[url]" id="delicious_4546" alt="Delicious" title="Delicious" class="ssb" style="padding-left: 5px; padding-right: 5px" />
</a>

As far as I can tell, this should work. But it won't. I'm using Firefox.

Anybody have any idea what the problem is?

David.

Just use this.className='name'

or this.style.backgroundColor='colourCode'

Originally Posted by chrishirst

Just use this.className='name'

or this.style.backgroundColor='colourCode'

That would require me to put the JavaScript on the image and not the anchor, wouldn't it? I guess that also does away with the need for an ID?

David.

Use

this.firstchild.className

then

Originally Posted by chrishirst

Use

this.firstchild.className

then

No, I'm quite happy to put the javascript on the images. I was just checking that's what you meant (I only occasionally touch JavaScript so am very rusty!).

So, if I put your original suggestion against the images, sans the ID tag, that should work?

David.

Yep. ...


And of course you could use the :hover pseudoclass on the container