Posted inJavaScript / jQuery / php

How to Change the src of an Image using jquery?

Solution: Use the jQuery attr() Method for jquery change image src

You can use the jquery attr() method to change or update on replace or on click button events of the image source (like as a the source attribute of the HTML img tag) in jQuery or JavaScript. The Bellow 3+ example will replace the image source when you just clicks on the this image also you can read my prev post for jquery find by id.

jquery find by id & jquery change image source

change image src with jquery

"image

$("#my_moviesID").attr("src","media/khatrimaza.png");

javascript img source

change image source plain javascript

document.getElementById('my_moviesID').src="media/khatrimaza.png";

You can simply my_movies use the jquery default function attr().

$("#my_movies").attr("src","tamilrockers.jpg");

html image onclick (img onclick)

using img onclick

$(document).ready(function () {
$('img').click(function(){
$(this).attr('src','media/tamilrockers.jpeg')
})
})

How to Change the Image Source Using jQuery?

Set image src to another image using jquery

replace or update the src of the image, not of the div or any HTML Tags:

JS CODE

$('.pakainfo img').click(function() {
var loc = $(this).attr("src");
$('#image-zoom img').attr("src",loc);
});

HTML Code

tamilrockers proxy
Khatrimaza a2movies mkvcinema
ssrmovies bolly4u oKhatrimaza

jquery change picture source of image

index.html







IMP Note:Please Click on the image to replace its Images source.

 
Poker Card

IMP Note: here above demo jquery find by id and run your HTML Page, then you can click function jquery on the image to change its Images source.

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery change image src & change multiple images on click jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype