foreach MySQL для списка конкретных номеров

Это можно сделать, включив изображение в div «viewport». Задайте ширину и высоту на div (в соответствии с вашими потребностями), затем установите position: relative и overflow: hidden на нем.

Чтобы отобразить секцию 30x40 изображения, начиная с (10,20):

<style type="text/css">
    div.viewport {
        overflow: hidden;
        position: relative;
    }

    img.clipped {
        display: block;
        position: absolute;
    }
</style>

<script type="text/javascript">
    function setViewport(img, x, y, width, height) {
        img.style.left = "-" + x + "px";
        img.style.top  = "-" + y + "px";

        if (width !== undefined) {
            img.parentNode.style.width  = width  + "px";
            img.parentNode.style.height = height + "px";
        }
    }

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>

<div class="viewport">
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>

Чтобы отобразить секцию 30x40 изображения, начиная с (10,20):

<style type="text/css">
    div.viewport {
        overflow: hidden;
        position: relative;
    }

    img.clipped {
        display: block;
        position: absolute;
    }
</style>

<script type="text/javascript">
    function setViewport(img, x, y, width, height) {
        img.style.left = "-" + x + "px";
        img.style.top  = "-" + y + "px";

        if (width !== undefined) {
            img.parentNode.style.width  = width  + "px";
            img.parentNode.style.height = height + "px";
        }
    }

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>

<div class="viewport">
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>

] Общие свойства CSS связаны с классами, так что на вашей странице можно иметь несколько видовых экранов / обрезанных изображений. Функция setViewport(…) может быть вызвана в любое время, чтобы изменить, какая часть изображения отображается.