color on top of image??

poker298 · 10-21-2009, 10:53 PM

I have an image that is gray-scale, and I want to dynamically change the color using CSS. Is this possible?

#example {
background-image:url('gray_button.png');
}

I could change the opacity/transparency of the image. How do I "set" a color on Top of this image though?

Any help appreciated.

jolly_nikki · 10-21-2009, 11:18 PM

I am not sure if the image color can be changed using CSS.
But you can change the image on mouse over by setting the src attribute to different value using JavaScript. Or change the background of the image

Code:

<html>
	<head>
		<script>
			function changecolor(){ 
				document.getElementById("logo").setAttribute("class", "logo");
			}
			
			function changecolorback(){ 
				document.getElementById("logo").setAttribute("class", "");
			}
		</script>
		
		<style>
			
			.logo {
			    position:absolute;
			    background-color:blue;
			    opacity: 0.8;
			    z-index: 100;
			}
			
		</style>
	</head>

	<body>
			<img src = "box.png" onmouseover = "changecolor()" onmouseout = "changecolorback()" id = "logo" /> 
	</body>
</html>