I have 3 buttons positioned absolutely:
.micro {
position:absolute;
}
#micro_1 {
left:1165px;
top:176px;
}
#micro_2 {
left:800px;
top:300px;
}
#micro_3 {
left:300px;
top:400px;
}
I am looking to create a fading effect on these 3 elements based on the mouse movement towards one of the images. When the mouse approaches image 1, it will fade in while images 2 and 3 fade out.
To track the mouse position I am using jQuery:
$('body').mousemove(function(e){
$('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);
By applying some mathematical calculations, I can achieve the desired effect.
This is what I have implemented so far:
$('body').mousemove(function(e){
$('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);
if (e.pageX > 394 && e.pageX < 533) {
$('#lueur_video_1').fadeIn('slow');
$('#lueur_video_2').fadeOut('slow');
$('#lueur_video_3').fadeOut('slow');
}
if (e.pageX > 533 && e.pageX < 722) {
$('#lueur_video_2').fadeIn('slow');
$('#lueur_video_1').fadeOut('slow');
$('#lueur_video_3').fadeOut('slow');
}
if (e.pageX > 722 && e.pageX < 1116) {
$('#lueur_video_3').fadeIn('slow');
$('#lueur_video_1').fadeOut('slow');
$('#lueur_video_2').fadeOut('slow');
}