How To Remove Image Color

Submitted by alpha_luna on Thursday, April 7, 2016 - 12:40.
In this tutorial, we are going to learn on How To Remove Image Color. Have you ever try this code? If not, this is for you and it's very simple to do this. Just follow the steps. In the other tutorial, we have seen a lot of animation like fade in or fade out using jQuery. In this source code. We manage the image background by using CSS, and the function of mouseOver and mouseOut to remove the color of the image using jQuery.

Directions:

First Step: Kindly copy this code below into the HEAD tag. 
  1. <script src="js/code_js.js"></script>
  2.  
  3. <script type="text/javascript">
  4. function remove_color(obj) {
  5. $(obj).addClass("new_color");
  6. }
  7. function original_color(obj) {
  8. $(obj).removeClass("new_color");
  9. }
  10. </script>
  1. <style type="text/css">
  2. .new_color{
  3. 	-webkit-filter:grayscale(100%); 
  4. 	filter:grayscale(100%);
  5. }
  6.  
  7. .style_frame {
  8. 	text-align:center;
  9. 	margin:50px;
  10. 	background:whitesmoke;
  11. 	padding:50px;
  12. }
  13. </style>
Second Step: SImply insert this in the BODY tag. 
  1. <div class="style_frame">
  2. 	<img src="image/1.png" style="width:300px;" onMouseOver="remove_color(this)" onMouseOut="original_color(this)" />
  3. 	<img src="image/5.jpg" style="width:300px;" onMouseOver="remove_color(this)" onMouseOut="original_color(this)" />
  4. </div>

Explanation:

In the code below, these functions are used to remove the CSS Styles and to make our image black and white. 
  1. <script type="text/javascript">
  2. function remove_color(obj) {
  3. $(obj).addClass("new_color");
  4. }
  5. function original_color(obj) {
  6. $(obj).removeClass("new_color");
  7. }
  8. </script>
This is our image tags, that our jQuery function will apply to remove the color of the image. 
  1. <div class="style_frame">
  2. 	<img src="image/1.png" style="width:300px;" onMouseOver="remove_color(this)" onMouseOut="original_color(this)" />
  3. 	<img src="image/5.jpg" style="width:300px;" onMouseOver="remove_color(this)" onMouseOut="original_color(this)" />
  4. </div>
And, this is the CSS Style. 
  1. <style type="text/css">
  2. .new_color{
  3. 	-webkit-filter:grayscale(100%); 
  4. 	filter:grayscale(100%);
  5. }
  6.  
  7. .style_frame {
  8. 	text-align:center;
  9. 	margin:50px;
  10. 	background:whitesmoke;
  11. 	padding:50px;
  12. }
  13. </style>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Tags

Add new comment

About text formats
  • 42 views