mouse coordinates for one div displayed in another div - jquery

Question

So I have 2 divs:

<div class="ccc" style="position: relative; left: 100px; top: 50px; width: 200px; height: 150px; border: solid 1px;" oncontextmenu="return false;"></div>
<div class="ddd" style="position: relative; left: 200px; top: 100px; width: 100px; height: 40px; border: solid 1px;" oncontextmenu="return false;"></div>

http://jsfiddle.net/n8rna/

And I need the following:

• I need to track the mouse position / movement inside of the div with class="ccc" (coordinates should be relative to this div, not to the page)

• those coordinates needs to be displayed inside of the div with class="ddd"

• if possible the coordinates should be registered at every 10th pixel (10,10 - 20,10 etc instead of 1,1 - 2,1 - 3,1...)

I would prefer jquery function for this, but I am also open for other approaches (javascript or something else).

Answer 1

<script>    
$(document).ready(function () {
    $('.ccc').mousemove(function (e) {
        $('.ddd').text("( " + (e.clientX - $(this).offset().left) + ", " + (e.clientY - $(this).offset().top) + " )");
    });
});
</script>

here is working example: fiddle