How load an image when it comes to the div area?

I have a div overflow=hidden; like the one I add here. I have some image in it, some in the visible div area and some are out of it (meaning if the div width is 300, the image left be 500 so you can't see the image). I change images position (all with each other) with a JavaScript function. How to load the image just when it comes to the div area (meaning: top and left of image be in div width and height)?

And I move images with a Generic Drag, like one here described in Generic Drag.

<div id="mydiv" style="overflow=hidden; width: 300px; height: 300px; border: 1px solid #f00;">
    <img id="Img1" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 481px; top: 347px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img2" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 200px; top: 200px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img3" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: -50px; top: -50px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img4" border="0"
         style="z-开发者_高级运维index: 10; position: absolute; visibility: visible; left: 481px; top: 50px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img5" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 50px; top: 60px; height: 15px; width: 16px;"
         src="house1.gif">
</div>

Add a position relative to your div, and you can track the position of the image position (top/left) and when the image is in range add the src property to your img attribute.

I recommend using jQuery as it will give you more functionality and more browser support of drag and drop.

Example:

<img id="Img1" border="0" style="z-index: 10; position: absolute; visibility: visible;
            left: 481px; top: 347px; height: 15px; width: 16px;" deffered="house1.gif">

JavaScript code:

// If image is in range.
var image = $('Img1');
image.attr('src',image.attr('deffered'));

This should work.

Try this,

<div id="mydiv" style="overflow:hidden; min-height:300px; min-width:300px;  border: 1px solid #f00;">
      <img id="Img1" border="0" style="z-index: 10; 
            left: 481px; top: 347px; height: 400px; width: 400px;" src="...">
  </div>