Question

I am trying to do images swaps on mouseovers in an existing slideshow function. The slideshow function requires me to add values to an array. Within that array I want to call my onMouseOver event handlers, but I believe I am running into an issue with escapable characters.

My attempt:

var leftrightslide=new Array()
leftrightslide[0]='<a href="#" onMouseOver="copyspeed=0; document.blah.src=\'images/slides/slideshow_top_01_mo.gif\'" onMouseout="copyspeed=slidespeed"><img src="images/slides/slideshow_top_01.gif" name=\'blah\'></a>';

On my MouseOvers, nothing is happening, but when I try to replicate this in just HTML, it works fine. This is what leads me to believe I am not handling the apostrophes in my event handler correctly:

<a href="" onMouseOver="document.blah2.src='images/slides/slideshow_top_01_mo.gif';" onMouseout="document.blah2.src='images/slides/slideshow_top_01.gif'"><img src="images/slides/slideshow_top_01.gif" name='blah2'></a>

Edit: Here is a link to a test page with full javascript.

Answer 1

Seems to me that your scripted version is failing because blah is not unique. Each instance will need a unique reference name.

Alternatively, pass this along with your mouse actions to identify the target.

EDIT

Something like this:

<script>
    function over(a){
        a.firstChild.src="bbb.jpg";
    }
    function out(a){
        a.firstChild.src="aaa.jpg";
    }
</script>
<a onmouseover="over(this)" onmouseout="out(this)"><img src="aaa.jpg"/></a>
<a onmouseover="over(this)" onmouseout="out(this)"><img src="aaa.jpg"/></a>