Image size changing in HTML

한글 블로그로 보기

1. Using Style.

This is Style code

1. <style>
2.     img{
3.         width:30%;
4.     }
5.     img:hover{
6.         transition-property:width;
7.         transition-duration:1s;
8.         width:50%;
9.     }
10. </style>

" img{} "means img's init status.

" img:hover{} " means mouse pointer's on the img.

"transition-property" means event property. so width is change.

"transition-duration" means event time.

This is initial status. 

This is mouse hover status.

2. Using JavaScrpit & class

You need a JavaScript code

1. <script type="text/javascript">
2.     $(document).ready(function() {
3.         $("#pic").click(function(){
4.             if($(this).hasClass("small")){
5.                 $("#pic").addClass("large") ;
6.                 $("#pic").removeClass("small") ;
7.                
8.             }
9.             else{
10.                 $("#pic").addClass("small") ;
11.                 $("#pic").removeClass("large") ;               
12.             }
13.         });
14.     });
15. </script>

"$("id").click " similar click listener.

"$(this).hasClass("class")" check class. If it has a class that return true. else false.

So. If #pic has a small class, add large class and remove small class.

This is style code

1. <style>
2.     #pic{
3.         -webkit-transition-property:width;
4.         -webkit-transition-duration:1s;
5.     }
6.     .small{
7.         width: 30%;
8.     }
9.     .large{
10.         width:50%;
11.     }
12.    
13. </style>

small class size is 30% and large class size is 50%

This is image code

1. <img class="small" id="pic"src="http://images.forbes.com/media/lists/companies/google_200x200.jpg"/>

image infomation.

This is before click

This is after click.