RSS
people
Oct 05 2009

Color image on mouseover of a gray one

By Vikash | Filled under: Web Design, javascript

The idea of this approach is following

1. Take two identical images: one colored and one grayscale.

2. Position them on exact same position. Grayscale image on top using CSS positioning and z-index.

<img src="gray.png" id="gray" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 100">
<img src="color.png" id="color" 
       style=" position: absolute; top: 20px; left: 20px; z-index: 1">

3. Onmouseover event of the gray image, reduce its opacity to zero. It can be done by including following in the head section of the HTML page.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {				
		$(this).find("img#gray").hover( function() {
			$(this).animate({ opacity: 0 }, 300);
                }, function(){
			$(this).animate({ opacity: 1 }, 300);
		});	
	});

I am using jquery here to animate the opacity change. The number “300″ indicated time of animation.

That’s it. We are done. Look at the demo here. (In the demo, I have separated the CSS, instead of inline styles)

No Comments | Tags: , , ,