How to Change Image SRC in jQuery

Save

The jQuery software includes the JavaScript components for creating user interfaces on Web pages and developing interactive Web applications. The jQuery allows you to edit and replace the Cascading Style Sheets (CSS) tags on Web pages, if you want to modify the page layout or to change the information on the location of graphics and images that are displayed. By using the jQuery ".attr()" method, you can easily change the source of images in "SRC" attribute to create dynamic Web pages.

  • Click "Start" in Windows. Click "Notepad" to open the Notepad text editor.

  • Click the "Open," "File" and select the Web page file in which you want to change the "SRC" image attribute by using jQuery.

  • Add the following code at the beginning of your Web page to change the "first.jpg" file to the "second.jpg" file in the "SRC" attribute by clicking on the image:

    <!DOCTYPE html>

    <html>

    <head>

    <script src="&lt;/script">http://code.jquery.com/jquery-git.js">&lt;/script>

    </head>

    <body>

    <img id="my_image" src="first.jpg"/>

    <script>

    $("first.jpg").click(function(){

     $(this).attr(src='/new/image/second.jpg');   

    });

    </script>

    </body>

    </html>

  • Click the "File," and then click "Save" to apply the change to your Web page.

References

  • Photo Credit Chad Baker/Photodisc/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!