Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    color on top of image??

    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.

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •