How to chage images within a tags range?

[foldaway]

Hi,

I'm currently trying to create a very particular rollover effect.
I need to programmaticall y 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 :)

[CODE=javascript]
// 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;
[/CODE]
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.

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

[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