Search jQuery

jQuery Forum

image slider hover

in Using jQuery • 12 years ago

I am making an image slider for my company and that when you hover over the image, depending on whether the mouse is on the right half or the left half of the image, a tiny overlay appears on that corresponding side of the image with a next image link.

I can't seem to wrap my head around how to detect whether a mouse is on left side or the right side of the image. I looked into offset but that's an element's offset relative to the document. Now I could do it by getting the elements offset and subtracting the offset of the mouse from offset of the container element on hover, but there seems like there has to be a much better, more reliable way.

Any help would be much appreciated!

If it helps, right now (for beta) the image sizes are static, 400px by 300px.

Thanks!

Replies(2)

jay.blanc..

Re: image slider hover

12 years ago

this should help you out; http://docs.jquery.com/Tutorials:Mouse_Position

rhinoo

Re: image slider hover

12 years ago

Thanks Jay!

That looks like a useful tutorial, but I actually just figured out a better solution (at least for now). I just figured I'd put two overlays with html IDs over the image within the slider container (one on left side, one on right side) with 0 opacity and higher z-index on page load, then when hovering over one of those overlays that will initiate another overlay to slide out on that corresponding side of the image. This should be much faster, not having to calculate mouse position every time someone hovers.

As of now, I don't see any problems with my solution, but thanks anyways I am still going to read that tutorial!

Top Reply

Response title

Attachments

jQuery Forum

image slider hover

Replies(2)

Re: image slider hover

Re: image slider hover

Statistics

Tags

Actions

Related Posts