The following script switches the css so that when the user hovers the mouse over the image the opacity increases and the image changes from b&w to colour. How would i get this transition to happen gradually over a period of time?

 

<script type="text/javascript"> 
<!-- 
function lightup2(obj){
obj.className=(obj.className=='test'?'testHov':'test')
}
//--> 
</script> 

<style type="text/css"> 
.test { 
background-color: #000080; 
color: #FFFFFF; 
font-size: 1.4em; 
width: 14em; 
filter: gray alpha(opacity=40); 
-moz-opacity: .4; 
} 
.testHov { 
background-color: #000080; 
color: #FFFFFF; 
font-size: 1.4em; 
width: 14em; 
filter: alpha(opacity=100); 
-moz-opacity: 1.0; 
} 

</style> 

<div class="test" onmouseover="lightup2(this)" onmouseout="lightup2(this)"><img src="landscape-photo.jpg"></img></div>

 

Many Thanks,

Craig

Off the top of my head I would suggest using JQuery - it has lots of little features like that.

 

I am no JS expert so the best I can do is tell you to go here: Jquery

 

and then check out: Nettuts Screencast on Jquery (Excellent stuff) for details on how to do it

 

I hope that helps out mate

You need to use setInterval

 

http://www.w3schools.com/HTMLDOM/met_win_setinterval.asp

Many thanks, will try it out a bit later when ive got a spare 5 mins. Dont have a clue about Javascript, its all just a load of code to me (hence why i asked).

Many thanks, will try it out a bit later when ive got a spare 5 mins. Dont have a clue about Javascript, its all just a load of code to me (hence why i asked).

 

If it's just a spot effect one off, I'd just use a library. Animations are not the easiest thing to achieve in JS, not at entry level anyway. If you want to learn JS, I'd say that animation isn't really an entry level area to get started on.