Q:

How to Change the Image Source Using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  294 
Very Easy
0

How to Change the Image Source Using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery attr() Method

You can use the attr() method to change the image source (i.e. the src attribute of the <img> tag) in jQuery. The following example will change the image src when you clicks on the image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Change Image Source on Click</title>
<style>
    .card{
        margin: 30px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("img").click(function(){
        // Change src attribute of image
        $(this).attr("src", "images/card-front.jpg");
    });    
});
</script>
</head>
<body>
    <div class="card">
        <img src="images/card-back.jpg" alt="Poker Card">
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Select an Element by Name in jQuery... >>
<< How to Convert a JS Object to an Array Using jQuer...