Question

I’m definitely still learning Javascript so please forgive me if this is a very basic question.

I am attempting to rotate through a list of image URLs into an href. All of the URLs have question marks in them as the URLs are being passed to Web Services to detail specifics vars about the image. In the header I have broken out the php $imgArr into separate javascript Image object .src values. Everything is working fine to this point.

Image URL Ex: http://webservices.ashx?size=25

<script type="text/javascript">
<!--
var step = 1;
var timeOut;

function playforward() {
    if (!document.images) return
    alert(eval("image" + step + ".src"));
    document.images.slideleft.src = eval("image" + step + ".src")
    if (step < <?php echo count($imgArr); ?> ) step++
    else step = 1
    timeOut = setTimeout("playforward()", 500)
}

function stopPlay() {
    clearTimeout(timeOut);
}
//-->
</script>

In the code above I have an alert of the base image name with the step variable that cycles through the image numbers. When the alert box pops up the image URL is correct, but when I take out the alert box and run the page the image errors out and the properties show that everything after the question mark is dropped.

I know enough to realize that eval is not a great solution but I don’t know a better one. Anyone have any suggestions?

EDIT:

As per request here is the code I am using to create the image variables. This code is being called in the Codeigniter Controller and passed to the document header. I do not believe it will be a great deal of help but here it is:

for($i = 0; $i < count($imgArr); $i++)
    {
     $urlPieces = explode('?', $imgArr[$i]);
     $num = $i+1;
     $images .= 'var image'. $num .'=new Image()
       imageleft'. $num .'.src="'.$urlPieces[0].'" + "?" + "'.$urlPieces[1].'"; ';
    }

Answer 1

There is no reason you should be using eval in your code at all.

That said <? php ... should be <?php

<script type="text/javascript">

    var step = 1;
    var timeOut;

    function playforward() {
        if (!document.images) {
            return;
        }

        alert(window['image' + step].src);
        document.images.slideleft.src = window['image' + step].src;

        if (step < <?php echo count($imgArr); ?> ) {
           step++;
        } else {
           step = 1;
        }

        timeOut = setTimeout(playforward, 500);
    }

    function stopPlay() {
        clearTimeout(timeOut);
    }
</script>