Changing a picture (<img> tag) when clicking on a link (<a> tag)

Works perfectly in Netscape... works only sometims in Internet Explorer

[satanicsurferz]

Hello,

I have a html file containing a table and many rows and cells.
Here's an example of a row (<tr>):
<tr><td width="100%" align="left" valign="top"><a href="/IntraWeb/CMSVDIR.nsf/fa_dir!OpenForm&amp;Seq=1&amp;ExpandOutline=1.1" target="_self"><img border="0" height="16" width="16" src="/icons/expand.gif" alt="Show details for Budget"></a><img border="0" src="/IntraWeb/CMSVDIR.nsf/folderC.gif!OpenImageResource" height="16" width="16" alt=""><img border="0" src="/icons/ecblank.gif" height="16" width="4" alt=""><font color="#000000"><a href="javascript:void redirectToURL('/va_id/20041215105330735637445639735!EditDocument&amp;project_id=5429&amp;path=Budget/');">Budget</a></font></td></tr>

When I click on the link (the one that calls the function "redirectToURL"), I want to change a picture (folderC.gif) to another one (folderO.gif).

The code below works flawlessly with anything related to Mozilla (Nescape, FireFox, ...)... but with Internet Explorer, the .src seems to be changed (if I do an alert afterward), but the image is not correctly shown. Only a blank is shown (white) instead of the image.

Can someone help? I tried everything.

Thanks!
Pascal

Here's my code:
/* Change the style of both the last selected folder, and the currently selected folder */
function setStyle(oldObj, newObj) {
if (oldObj) {
oldObj.parentNode.previousSibling.previousSibling.src = 'folderC.gif';
oldObj.style.backgroundColor = '#ffffff';
oldObj.style.color = '#000000';
}
if (newObj) {
newObj.parentNode.previousSibling.previousSibling.src = 'folderO.gif';
newObj.style.backgroundColor = '#004080';
newObj.style.color = '#ffffff';
}
return true;
}

function getElements(evt) {
/* Cross-browser way of getting the event object */
evt = (evt)? evt : ((event)? event : null);
/* Cross-browser way of getting the active element object */
elem = (evt.target)? evt.target : evt.srcElement;

/* Only care about A elements... */
if (elem.tagName == 'A') {
/* ... that are "folders" */
if (elem.href.indexOf('redirectToURL')!= -1) {
var obj = document.getElementById(idPrevious);
/* Change the style of the previous/current selected folder */
setStyle(obj, elem);
}
}

document.onclick = getElements;

[orion_rus]

previousSibling is so strange that i think a problem there,
good luck to you

[satanicsurferz]

What's strange with previousSibling? It's a standard of the W3C.

[Birdman]

I'm taking a stab here, but it could be a syntax problem due to the previousSibling being used twice in the line.

Maybe this will work:

firstSib = oldObj.parentNode.previousSibling;
firstSib.parentNode.previousSibling.src = 'folderC.gif';

It's worth a shot, eh?

[satanicsurferz]

Thanks for your answer...
But I used that syntax often without any problem.
I do an alert of my oldObj, and I receive the correct object.

If I click, let's say, on ten links, it could work on two of them (randomly)... quite strange. And again, no problem at all with Mozilla/Netscape/FireFox.
If I loop on all my images, and do an alert of the src attribute, it has been correctly changed. The result is just not always shown on the page. (hence the blank space).

I tried that in the past, and it has always worked fine. The only difference I can see is that I'm using this...
document.onclick = getElements;

... instead of the common onmouseover/onmouseout event to swap images.

Thanks for helping me!

Pascal