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.

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

<img src="1.png">

to

Expand|Select|Wrap|Line Numbers

<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 :)

Expand|Select|Wrap|Line Numbers

 
// 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.

Expand|Select|Wrap|Line Numbers

 
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

How to chage images within a tags range?

re: How to chage images within a tags range?

re: How to chage images within a tags range?

re: How to chage images within a tags range?

re: How to chage images within a tags range?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about