How to chage images within a tags range?

[foldaway]

Hi,

I'm currently trying to create a very particular rollover effect.
I need to programmatically modify a number of images.

A short example of the current html, which I'm trying to modify.

<a href="temp.html"onMouseOver="mouseover(this);"><span class="p1CE"><img src="1.png"></span><span class="p1CB"><img src="1.png"></span></a>
 

In this example there are only 2 SPANs but there could be many more.

When the mouseover event is triggered, the mouseover function receives the link object. I can use this to go through the SPAN's using childNodes. However I cant figure out how to rewrite the SPANs content!

All I need to do is modify each

<img src="1.png">

to

<img src="1hl.png">

.

There is only ever 1 IMG inside a SPAN.

Any help would be greatly appreciated.
Thanks

PS. If I have missed the obvious its because this is my second day learning JavaScript so apologies in advance.

[gits]

hi ...

let me give you an idea :)

// retrieve the src from the image node
var s = img_node.src;
 
// now we match the chars before the .
var m = s.match(/([^\.])/)[1];
 
// next we replace it like this 
var src = s.replace(m, m + 'h1');
 
// now we set the src of the image node
img_node.src = src;
 

kind regards

[foldaway]

Thanks gits for your post. To use your example I assume I need access to the image nodes. The problem I have is that I cannot figure out how to get to the image nodes using the DOM!

My current (non-working function!) is as follows.

function mouseover(obj)
{
    for(i=0; i<obj.childNodes.length; i++)
    {
       obj.childNodes[i].innerHTML = "<img src="1hl.png">";
    }
}
 

[foldaway]

Oops,
Just got it working, I was using the wrong quotes!
Sorry and thanks for the help.

[gits]

hi ...

glad to hear you got it working :) ... post back to the forum anytime you have more questions ...

kind regards