Change image onclick with jQuery

Learn how to change image when onclick event occurs (with help of jQuery). My previous article was about how to change image with onclick event with common javascript. This article is focused on doing the same thing but with jQuery.

First there will be one simple demonstration of changing image with onclick event with two buttons. Each button change image when clicked.

Second demonstration is how to change image when onclick event is happened on that image. So, image is changed every time user click on it.

Changing image after onclick event on button with jQuery

  

When "Show Undo" button is clicked arrow is pointed to left, when "Show Redo" is clicked image is changed to arrow pointed to left.

Let's take a look at code:

<p><img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" style="height: 85px; width: 198px" id="ChangeImage" />
</p>
     
<p><input id="Undo" type="button" value="Show undo" />&nbsp;&nbsp; <input id="Redo" type="button" value="Show Redo"  />
</p>


    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Undo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/undo.png');
            });
            $("#Redo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/redo.png');
            });
        });
    </script>

Explanation of code for alternating image:

• on the top there are HTML code for image and two buttons

  
  <p><img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" style="height: 85px; width: 198px" id="ChangeImage" />
  </p>
       
  <p><input id="Undo" type="button" value="Show undo" />&nbsp;&nbsp; <input id="Redo" type="button" value="Show Redo"  />
  </p>



• to use jQuery we need to have a call to jQuery library
  

  
     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>



• the main part of jQuery code, two onclick events, when input Undo is clicked image with id "ChangeImage" is changed to Undo image.


• when input Redo is clicked image with id "ChangeImage" is changed to Redo image
  

  
   <script type="text/javascript">
          $(document).ready(function () {
              $("#Undo").click(function () {
                  $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/undo.png');
              });
              $("#Redo").click(function () {
                  $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/redo.png');
              });
          });
      </script>
  

Alternate image when image is clicked with jQuery

When image below is clicked, image is changed.

Check code how to accomplish change image when onclick event is raised:

  <img src="http://www.userinterfaceicons.com/80x80/undo.png" class="img-swap" />

 <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            $(".img-swap").live("click", function () {
                if ($(this).attr("class") == "img-swap") {
                    this.src = this.src.replace("undo", "redo");
                } else {
                    this.src = this.src.replace("redo", "undo");
                }
                $(this).toggleClass("on");
            });
        });
     </script>

How this code is working?

• first line is image with class "img-swap"


• then there is a function which occurs when object with class "img-swap" is clicked


• if clicked class is "img-swap" then "undo" is replaced with "redo" for src attribute, so the other image is showed


• if clicked class is not "img-swap" then "redo" is replaced with "undo" for src attribute, so the other image is showed


• at the end we have - $(this).toggleClass("on") - this code add "on" to class "img-swap" so we get class "img-swap on", on the second click with - $(this).toggleClass("on") - we get only "img-swap"

Change image onclick with javascript

How to change image with onclick javascript event on your web page? Easy, just follow instructions you find here.

The onclick event occurs when the user clicks on some element on web page, most when button is clicked. So if you visited this article you probably want some image appear after some button is clicked (then onclick event occurs).

There are two demonstrations and explanations:

• change image when button is clicked


• change image when image is clicked

If you like jQuery visit: Alternate image on click with jQuery.

Change image when button is clicked

Give a look at demonstration below, when "Show redo" button is clicked onclick event occurs and image is changed to "redo" image. When "Show undo" is clicked image is changed to "undo" image.

  

Try to click and make sure.

Here is step by step guide how to make onclick change image demonstration.

• first you need to add one img element and two input elements.

<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" 
            style="height: 85px; width: 198px" id="image" /></p>
    <p>
        <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>




• second step is to add javascript code which will be called when one of input elements (buttons) is clicked

  <script language="javascript">
      function ShowRedo() 
  {
          document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/redo.png";  
      }
  
      function ShowUndo() 
  {
          document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/undo.png"; 
      }
  </script>
  

  
  


• so, when Button1 is clicked, onclick event occurs and ShowRedo() method is called. ShowRedo method change image to "Redo" image


• when Button2 is clicked, onclick event occurs and ShowUndo() method is called. ShowUndo method change image to "Undo" image


• here is complete code for this demonstration:

  
  <p>
          <img alt="" src="[PATHTOFIRSTIMAGE]" 
              style="height: 85px; width: 198px" id="image" /></p>
      <p>
          <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
  <input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>
  
  <script language="javascript">
      function ShowRedo() 
  {
          document.getElementById("image").src = "[PATHTOFIRSTIMAGE]";  
      }
  
      function ShowUndo() 
  {
          document.getElementById("image").src = "[PATHTOSECONDIMAGE]"; 
      }
  </script>
  

Change image when user cick on image

Below is example how to change image when user click on this image. Try to click it and image will change.

It is accomplished with very similar way like demonstration with two buttons and change image. The difference is that onclick event is happening when image is clicked not button.

• on the start we have image element with onclick event which call changeImage javascript merhod


• when onclick event of image occurs javascript method changeImage() is called


• if src attribute of image element is set to first image then second image is displayed


• if src attribute of image element is set to second image then first image is displayed



<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
            style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

<script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png") 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
        }
    }
</script>

Increase website traffic

If you want to have successful and high traffic web site or blog read this article and you will find a few advices.

Advices for increasing web traffic:

• Make sure Google indexed your web site - find out how to know does Google indexed your site and tips for submitting a request for Google crawler



• Learn how to make keyword research - choosing the right keywords for your article could be a key for making top ranking article. Follow the link and learn what free keyword research tools exists on the web and how to use them.
  
  
  







• Basic web page optimization techinques - a short tutorial about most essential things you should know when optimize you web page for increasing web traffic such as: title tags, URL keyword optimization, keyword position on web page, keyword density, keyword proximity...
  
  








• Use google search operators for Seo - find what are google search operators and how to use them for increasing visits on your web site



• How to analyze and improve bounce rate - Bounce rate is the percentage of visitors who entered the site on a page and left right away. Bounce rate should be lower as possible. Learn how to measure, track and improve bounce rate.



• Increase blogger traffic change title - Here is simple procedure which help me to significantly increase blogger traffic which can be applied for other types of web sites too.

   [Post title]: [Blog title]

   Title is important


• Tips for increasing website traffic from best - advices for increasing web traffic from successful blogger Ana Hoffman.



• Make blog plan for next year - Here is some of my thoughts what to do for more vistis on your blog or web site.