How to implement image browsing with fading buttons inside the image

I am developing an application for browsing images. I have already implemented the browsing mechanism by using standard text anchors outside the image.

Now I would like to implement the browsing mechanism "inside" the image. Let's make it clear. The user sees the image and upon onMouseOver event, depending on which side of the picture t开发者_StackOverflow社区he pointer goes, it is shown an arrow respectively on the right or left side. Upon onClick event, on the right or left side of the picture, the user should be able to browse to the previous/next image. It is not necessary to click on the arrow to browse.

Now I know that it is possible implement this function with Javascript, especially the jQuery framework has some interesting functions to do this. I am following this approach:

1. Create a div container for the image and place the <img> tag inside.

2. Define the position for the navigation arrows inside the container.

3. Upon onMouseOver event call a jquery function that places an arrow image in the position defined at step 2.

4. Use some fading function to implement the fade effect.

5. Upon click call the image browsing functions already implemented.

My doubts are mainly about:

Q1) Is my approach (above listed points) correct?

Q2) How can I adjust the position of the browsing arrows depending on the image size?

Q3) How can make jQuery "understand" whether the user is onMouseOver or onClicked to the left or right part of the image?

Although all the answers are appreciated, I am not asking plain code to copy paste and adjust in my application, but I would like to know whether my approach is correct and have a couple of useful jQuery (or any other JS framework) functions to implement this functionality.

Q1: Your approach is going into the right direction.

Q2: With jQuery you can read out the width of an element or you can position the arrow element with position:absolute; right:20px ... but check Q3->

Q3: In your layover define two seperate divs, one on the right half the other on the left half over the image. So the structure could be:

<div class="image-wrapper">
   <img src="somthing.jpg"/>
   <div class="navigation-overlay">
      <div class="left-arrow></div>
      <div class="right-arrow"></div>
   </div>
</div>