How do I access and modify an image in an HTML page using javascript?

Question

My HTML page has an image with id img. The idea is that by clicking first, previous, or next, the user can navigate through a set of images. How do I do this using JavaScript?

Answer 1

Use jQuery!

var myImg = $("#myimg");
$("#next").click(function(){
    var id = myImg.attr("data-id") + 1;
    myImg.attr("src", "image"+id+".jpg");
});
$("#prev").click(function(){
    var id = myImg.attr("data-id") -1;
    myImg.attr("src", "image"+id+".jpg");
});

HTML:

<img id="myimg" src="image1.jpg" data-id="1">
<a href="#" id="next">Next</a><br>
<a href="#" id="prev">Previous</a><br>

This is a very dummy example. There are numerous slideshow plugins out there!

Answer 2

This should be a good start for you:

<script>
  var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir
  var index = 0;
</script>
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/>

click the image to slide.

If you need buttons, see this example:

  <img id="clicker" src="img1.png"/>
  <a href="#" onclick="prev(); return false;">Prev</a>
  <a href="#" onclick="next(); return false;">Next</a>
  <a href="#" onclick="first(); return false;">First</a>
  <a href="#" onclick="last(); return false;">Last</a>
<script>
  var imgs = ["img1.png","img2.png","img3.png"];
  var index = 0;
  var clicker = document.getElementById("clicker");
  function prev() { clicker.src = imgs[--index%imgs.length]; }
  function next() { clicker.src = imgs[++index%imgs.length]; }
  function first() { clicker.src = imgs[index=0]; }
  function last() { clicker.src = imgs[index=imgs.length-1]; }
</script>

The return false means that default action on click (follow the link) is supressed. Javascript can access elements ie using id (see clicker here). Once you get comfortable with this and you start to solve browser compatibility problems, it is good idea to continue with jQuery (as the other suggests), MooTools or other framework.

Answer 3

No need jQuery:

<script type='text/javascript'>
  window.onload = function() {
    var imageSrcs= ['1.jpeg', '2.jpg', '3.jpg'];
    var index = 0;
    var image = document.getElementById('img');

    var previous = document.getElementById('previous');
        previous.onclick = function() {
            index -= 1;
            if(index < 0) index = imageSrcs.length - 1;
            image.src = imageSrcs[index];
        }

    var next = document.getElementById('next');
        next.onclick = function() {
            index += 1;
            if(index == imageSrcs.length) index = 0;
            image.src = imageSrcs[index]; 
        }

 }
</script>

And html:

<img src='1.jpeg' id='img'>
<div>
    <span id='previous'>Previous</span>
    <span id='next'>Next</span>
</div>

Answer 4

You do not need a library for this. Something like this will change the image url, where "theImg" is the id of the image:

document.getElementById("theImg").src = "newUrl.png";

To do it without explicit id s, this will change the url where i is the index of the image:

document.getElementsByTagName("img")[i].src = "newUrl.png";

Answer 5

Try something like this (untested):

LOAD JQUERY:

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

JAVASCRIPT:

<script type='text/javascript'>
  var lst_src = ['img1.jpg', 'img2.png', 'img3.gif'];
  $('a', '#nav').click(function(e) {
    e.preventDefault();
    var src_current = $('#img').attr('src');
    var index = lst_src.indexOf(src_current);
    var len = lst_src.length;
    var action = $(this).attr('class');
    switch ($action) {
      case 'previous' : var i = index - 1;
                        if (i < 0) src_current = lst_src[len + i];
                        else src_current = lst_src[i];
                        break;
      case 'next'     : var i = index + 1;
                        if (i > len) src_current = lst_src[i - len];
                        else src_current = lst_src[i];
                        break;
      case 'first'    : src_current = lst_src[0];
                        break;
      case 'last'     : src_current = lst_src[len - 1];
                        break;
     }
     $('#img').attr('src', src_current);
  });
</script>

HTML: Use the class of a link to denote the required action:

<img id='img' src='img1.jpg'>

<p id='nav'>
  <a href='' class='first'>&larr;&larr;First</a>
  <a href='' class='previous'>&larr;Previous</a>
  <a href='' class='next'>Next&rarr;</a>
  <a href='' class='last'>Last&rarr;$rarr;</a>
</p>