happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

change UI

Changing attribute values ​​of elements

attr(attribute,the value of attribute);

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.

disney

Click on the image above to let Honda's biped robot Asimo come out.

To do this, the first attribute of src ('', '') 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. ^-^;

disney

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-2.1.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.

강좌로 돌아가기