JavaScript Help :)

I’m developing a website for myself and i’ve run into a little bit of trouble. I have a sub menu on my website at the left, which consists of a <dl> list. When you click one of the elements <dt>, it changes the content of the main div in the middle, thus saving time reloading the page, and removing the need to create several pages. However, I want the image which is set as the <dt> background to shift by -30px up when it is active, to display the image as it should look when the link is active.

Now for the main navigation I have simply used a:active to achieve this, but in this scenario this doesnt work, because the link doesnt go to another page, it isnt considered active by the browser, or atleast not by mine.

I have tried to add into my JS the function to manually change the background position of the <dt> when it changes the content, but with no luck so far.

What I have is :
HTML

[CODE]<dl>
<dt id=”bleedingArt”><a href=”#” onclick=”change()”></a></dt>
<dt id=”anotherLink”><a href=”#” onclick=”change1()”></a></dt>
<dt id=”yetAnotherLink”><a href=”#” onclick=”change()”`></a></dt>
</dl>[/CODE]

CSS

[CODE]#leftNav dt#bleedingArt,
#leftNav dt#bleedingArt a {background-repeat:no-repeat; width:150px; height:30px; background-image: url(../images/navigation/bleedingArt.png);}[/CODE]

and JavaScript

[CODE]document.getElementById(“bleedingArt”).style.backgroundPosition = “0 -30px”;[/CODE]

where “bleedingArt” is the id assigned to the individual <dt> element.

Any help on the matter, whether it be tweaks, or a complete work around would be greatly appreciated.

Thanks

Chris

Also in #JavaScript _↴