smooth image fade

[Martin_Man]

I was wondering if anyone can help me create a smooth image fader for my video site. If you move your mouse over the image for it to fully appear, it appears to quickly looking very unprofessional.

click here for a demo

And here is the code

<img src="videos/life1/life.jpg" alt="Plant 1, DC Logo" width="213" height="121"  onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />

I hope someone can help

thanks!!!

 

[GravyMonster]

jQuery is perfect for this - it's a 1 liner

Checkout the fadeIn() and fadeOut() functions.

 

[suarve]

Or you could use the innerfade plugin for jquery.

If it's a single image and you need to do the hover on mouseover, it may be quicker to do something like (again, using JQuery):

$('div.image').hover(function() {
$(this).fadeTo(200, 0.33); },
function() {
$(this).fadeTo(200,1.0);
});

 

[Martin_Man]

jQuery is perfect for this - it's a 1 liner

Checkout the fadeIn() and fadeOut() functions.

This new jquery is confusing. I have already downloaded the jquery for my video player, is there any tutorials so i understand it a bit more? specially for the image fader part because i'm lost by a mile.

 

[suarve]

This new jquery is confusing. I have already downloaded the jquery for my video player, is there any tutorials so i understand it a bit more? specially for the image fader part because i'm lost by a mile.

You have everything you need there The code I posted above is very basic jquery, for explanaton go to the jquery site

 

[Martin_Man]

You have everything you need there The code I posted above is very basic jquery, for explanaton go to the jquery site

Ok i shall take your word. It might take me a while to learn it but i shall give it a go.

Whats this all usefull now for any way? Or does that all get explained from there site?