Question

I do an exercise to write an image gallery w/o using any libraries or jquery. I put an image into a table cell. I have functions in javascript moveLeft() and moveright().

The bug that images moves out of the cell area. I want user will see only the part of the image when it passes cell border.

The css code:

#moving_image  {
    background-image: url(picture/13.jpg);
    background-repeat: no-repeat;
    position: relative;
    border:1px solid red;
    width: 130px;
    height: 100px;
    left: 10px;
}

The html code for cell:

.....
<tr height="130">
     <td width ="420" height="130">
         <div id= "moving_image">
         </div>
     </td>
</tr>

Javascript code for moveRight() ,{as example. I also has moveLeft()}:

<script language=javascript type="text/javascript">
    var x=10;
    function moveRight()
        var layerElement = document.getElementById("moving_image");
        x+=10;
        layerElement.style.left=x;
    }
 ....
</script>

So, what I do in order to wrap an image in the table cell? Thanks

Answer 1

Try using z-index for table row and the div containing your image
or give to table rows CSS parameter “overflow:hidden”