Change color photo to Black&White Photo using Jquery | Sanwebcorner

Change color photo to Black&White Photo using Jquery

It is simple jquery concept to change photos color to gray on mouse hover. The jquery used to change the color image to black and white image. This is very useful when you create gallery page in your website. This very clear and perfect example to change orginal photo to grayscale (black & white) photo.




Change color photo to Black&White Photo using Jquery


<html>
<head>
<title>change color photo to black and white photo</title>
<style>
.blk-white{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
function display_blackwhite(obj) {
$(obj).addClass("blk-white");
}
function display_colorphoto(obj) {
$(obj).removeClass("blk-white");
}
</script>
</head>
<body>
<img src="change-colorphoto-black-white1.jpg" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
<img src="change-colorphoto-black-white2.png" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
</body>
</html>