Scrollable div is not scrollable when hovering over image

Question

I have this example:

<div class="container">
   <div class="box">
      <object class="object" data="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg">
      <img class="image" src="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg">
     </object>
   </div>
</div>


.container {
width: 200px;
height: 500px;
overflow: scroll;
background: red;
}

.box {
top: 20px;
left: 20px;
width: 50px;
height: 1000px;
position: relative;    
}

.object {
position: absolute;
}

.image {
top: 50px;
position: absolute;
cursor: pointer;
}
}

http://jsfiddle.net/aS972/1/

Hover over the image, and you won't be able to scroll, hover outside of image, and you can scroll. I need to be able to scroll even when hovering over the image.

What am I doing wrong?

Answer 1

A lot of times with flash video you have to add a <param name="wmode" value="transparent" /> inside the <object> tag to get html to render over it and events (like scrolling) to be fired.

Hopefully that can steer someone to the correct answer.