changing link background image dynamically

[david arnold]

Hi,

I have a few links on a web page, each of link has a background image, i want to change the background image when the link is clicked , related code as below:
HTML: <a class='title_link_error_select'......></a> CSS: .title_link_error_select { width: 197px; height: 25px; display:block; background-image:url(./images/error_selected.gif); text-decoration: none; color:black; padding: 0px 0px 0px 0px; font-size:12px; } .title_link_error_select active{ background-image:url(./images/error_no_selected.gif); } JAVASCRIPT: method 1: document.getElementById(linkID).style.backgroundImage="url(./theme/images/error_no_selected.gif)"; method 2: document.getElementById(linkID).className = "title_link_error_no_select";

First, I tried to use javascript to change the link class(method 2), then I tried to change the link background image directly(method 1), I also tried to define the link active through css, all of them does not perform the task I need. Please help to figure out the problem.

Thanks.

[Bear Bibeault]

david arnold wrote:
document.getElementById(linkID).className = "title_link_error_no_select";

There is no such class in your (shown) CSS.

[david arnold]

oh, i forgot to to include that in the post, it is similar to the others except it has different background image.

.title_link_error_no_select { width: 197px; height: 25px; display:block; background-image:url(./images/error_not_selected.gif); color:white; padding: 0px 0px 0px 0px; font-size:12px; margin-top: 1px; margin-left:auto; margin-right: auto; }

Thank you.

[Bear Bibeault]

So, what's the next debugging step? For example, have you 100% verified that the expression document.getElementById(linkID) references the expected element?

And, you do realize that assigning to className replaces all other classes, right?

[david arnold]

Thank you Bear.

Yeah, document.getElementById(linkID) point to the right element, and I just tried
document.getElementById(logDIV).style.backgroundImage="url(theme/images/error_selected.gif)"; document.getElementById(logDIV).innerHTML = logDIV; document.getElementById(logDIV).className = "title_link_error_select"; document.getElementById(logDIV).innerHTML = logDIV;

Which works, without the resetting the attribute innerHTML, both does not work. I do not know why.

I am not very sure if setting the className to that element will replace the old one, now I am sure after your informing .

Thanks.