Question

I have an image and a button within a panel.

When the button is clicked I would like my image to be replaced with another image at random based on an array of stored images.

I’m stuck on implementing a change image function within the button.

Assistance would be appreciated.

Answer 1

You could do it using jQuery by:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>

    $(document).ready(function() {
        // Handler for .ready() called.
        var imageList = ['one.png', 'two.png', 'three.png', 'four.png'];

        $('#btn').click(function(){
            var imgName = imageList[Math.floor(Math.random()*imageList.length)];
            $('#image').attr('src', imgName);
        });

    });


</script>

<button id="btn">Click Me</button>
<img id="image" src="someimage.png" />