I would like to have an image which changes into three images when the mouse is moved to the left and right of it.
I found a jQuery script that works well. I edited it a bit and got it to display the left and right arrows when the mouse was moved. I just have the center part left to do and am not sure how to add that.
Here is what I have. (See also jsFiddle page: http://jsfiddle.net/WhkJB/ )
var image_src = {
left: "http://i.imgur.com/ubKrq.jpg",
right: "http://i.imgur.com/SxHCS.jpg",
};
$(document).mousemove(function(event){
var mloc = {
x: event.pageX,
y: event.pageY
};
if(
(mloc.x >= 0 && mloc.x <= $(document).width()/2 )
){
$(".arrow").attr("src", image_src.left);
}else if(
(mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) &&
(mloc.y >= 0 && mloc.y <= $(document).height()/2)
){
$(".arrow").attr("src", image_src.right);
}
});
Another question - When you move the mouse below the image it doesn't work. Is there anyway to make it so it does it so it moves on the whole page?
Any help would be greatly appreciated.
You can first calculate the X position percentage and then apply a simple if
against it.
i.e.:
var image_src = {
left: "http://i.imgur.com/ubKrq.jpg",
right: "http://i.imgur.com/SxHCS.jpg",
up: "http://i.imgur.com/SxHCS.jpg" // replace with UP image
};
$(document).mousemove(function(event){
var xPercent = (event.pageX / $(document).width()) * 100;
if(xPercent <= 40) { // show left
$(".arrow").attr("src", image_src.left);
}
else if(xPercent >= 60) { // show right
$(".arrow").attr("src", image_src.right);
}
else { // show up
$(".arrow").attr("src", image_src.up);
}
});