Search code examples
javahtmlcsssmartphone

How do I display a different image everytime the image is clicked?

I am completely new at this so if you want to direct me to something informative and educational i completely understand.

I have a file full of images and i want them to display in an app one after the other when they are clicked.

any help would be greatly appreciated

Solution

  • If you are using html js and css:

    jsfiddle http://jsfiddle.net/harshdand/dec2mpbv/

    html:

    <img src="http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1124750273-15.jpg" id="images"/>

    js

    1. make an array of images u want

      var currentImageIndex = 0;

var images=[
    'http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1124750273-15.jpg',
    'http://images7.alphacoders.com/408/thumbbig-408758.jpg',
    'http://images6.alphacoders.com/410/thumbbig-410020.jpg',
    'http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1127034390-11.jpg'
];

      document.getElementById('images').setAttribute('src',images[0]);

      document.getElementById('images').onclick = function(){
    if(currentImageIndex<images.length-1)
        currentImageIndex++;
    else
        currentImageIndex = 0;
     document.getElementById('images').setAttribute('src',images[currentImageIndex]);
}