CODEWITHSUNDEEP
javascripthtml
DaedalusUsedPerl
DaedalusUsedPerl

Reputation: 772

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

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?

Upvotes: 0

Views: 159

Answers (5)

Someth Victory
Someth Victory

Reputation: 4549

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>

Upvotes: 1

Jan Turoň
Jan Turoň

Reputation: 32922

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 i.e. 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.

Upvotes: 1

Stefan
Stefan

Reputation: 3900

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>

Upvotes: 0

papaiatis
papaiatis

Reputation: 4291

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!

Upvotes: 1

graphicdivine
graphicdivine

Reputation: 11211

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 ids, this will change the url where i is the index of the image:

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

Upvotes: 0

Related Questions