attr() provides the ability to change the values we use in tags as well as src = "" alt = "" title = "".
for example
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
You can change the above src attribute value /material/images/jQuery/disney.jpg or change the alt attribute value disney.
Click on the image above to let Honda's biped robot Asimo come out.
To do this, the first attribute of attr('', '') is used, and the second is the value of the attribute to change.
var myimage = $('.myimage');
myimage.click(function(){
myimage.attr('src','/material/images/jQuery/asimo.png');
});
Click image below for Tokyo Disneyland's 25th Anniversary Cinderella Castle and it will change image Now you know how to do this. ^-^;
Click to change to the photo of Honda's most advanced bipedal robot, Asimo. In other words
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" /> The above source has been been changed to <img class="myimage" src="/material/images/jQuery/asimo.png" alt="disney" />
If you check the results with the source
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var myimage = $('.myimage');
myimage.click(function(){
myimage.attr('src','/material/images/jQuery/asimo.png');
});
});
</script>
<style>
</style>
</head>
<body>
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
</body>
</html>
In addition, you can change the href = "", target = "", etc. of a tag, so please test it.
Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.
ALL COMMENTS 0
Sort by
