How to replace multiple images with Javascript and change back

Question

I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.

<html>

   <head>

      <script type="text/javascript">

         function changeimage(img, new_src)
         {
            var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
            if (cur_src == new_src)
            {
               img.src = img.old_src;
            }
            else
            {
               img.old_src = cur_src;
               img.src = new_src;
            }
         }

      </script>

   </head>

   <body>

      <img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
      <img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
      <img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
      <img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
      <img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
      <img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />

   </body>

</html>

Much thanks!

jmarvdave · Accepted Answer · 2014-05-20 17:00:47Z

When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.

In jQuery, you can toggle a class on and off with one line. it looks something like this:

$('.toggleimage').toggleClass('on');

In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:

link to full code on my Gist

In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.

Ferrakkem Bhuiyan · Accepted Answer · 2014-05-20 15:16:28Z

0

function changeImg(img) {
    if ( img.src.indexOf("_off") > 0 ) {
        img.src = img.src.replace("_off","_on");
    }
    else {
        img.src = img.src.replace("_on","_off");
    }
}

it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.

may be its helps you

edited May 20, 2014 at 15:16

answered May 20, 2014 at 15:08

Ferrakkem Bhuiyan

2,7932 gold badges25 silver badges39 bronze badges

3 Comments

Sterling Archer Over a year ago

How can this help? It doesn't explain anything

user1017882 Over a year ago

Edited to make the code more relevant, although I recommend your provide an explanation into the overall approach.

user3590255 Over a year ago

@code360 Thank you so much for the response. Somehow it's not working though... could it be because there are multiple buttons? I'm going to need to put this into a Bootstrap site as well - not sure if that makes a difference.

Collectives™ on Stack Overflow

How to replace multiple images with Javascript and change back

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related