All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Change SRC Of Image jQuery

Last Updated : Mar 11, 2024

Change SRC Of Image jQuery

In this article we will show you the solution of change src of image jQuery, here we are going to show you example to achieving result with the help of prop() and html() method.

The prop() generally set or returns properties and values of selected elements. Another thing is it returns first matched result to you if has many matched elements.

The html() used to append some message to user for notifying purpose.

Step By Step Guide On Change SRC Of Image jQuery :-

Here we defined html block with image tag, button element for proceed further process and empty p tag for display notify message.

In script block we defined ready method, which is loads source code on browser.

Within that using prop() method we sets new value for already defined src attribute and text() method used to appends some text with p element.

<!DOCTYPE html>
<html>
<head>
  <title>change image src using jQuery</title>
</head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".imgCh").prop("src","new/demo.jpg");
        $("p").html("New image changed....");
      })
    })
  </script>
<body>
  <img src="new/example.jpg" class="imgCh" />
  <button>Change Here</button>
  <p></p>
</body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready function, there specified button with click() method to generate some code after receives user click event responce. It is appends with button by specifying element name with click() method.
  8. Here specified image tag by class attribute value 'imgCh' with prop() method to change src attribute value with another value. The new value defined before image name, which is refers folder name of image present area.
  9. After that we binds notification message with p tag with the help of html() method.
  10. In body block we defined img tag with class attribute value 'imgCh', button element and empty p tag.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to change image src value using jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.

When we executes this program on browser we can see uploaded image and button 'Change Here'.

Now user need to click on button then you can see new image on webpage with some text of 'New image changed....'.

I hope this article on change src of image jQuery helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪