How To Remove Image Color

Submitted by: 
Language: 
Visitors have accessed this post 212 times.

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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.