Announcement

Collapse
No announcement yet.

CSS Full Image Scrollable

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Full Image Scrollable

    Alright, It's been a LOOOOOOOOONG time. While I used to be able to solve any CSS problem, I am at complete loss now so I'm hoping this can come full circle. I have a large image of a topographic map that I want to be centered and full browser when the page loads (at full resolution of the image). I want the user to have the ability to move the mouse around the screen and have the page scroll around the map. Any suggestions on the best way to accomplish this?

  • #2
    Well,

    You could create a div that has the image and height of the browser windows.
    with overflow-Y and overflow-X on scroll...

    Something like this should probably work.

    HTML
    Code:
    <div class="scrollableImage" id="imageDiv">
        <img src="src" id="actualImage" />
    </div>
    CSS
    Code:
    body {
        width:100%;
        height:100%;
    }
    .scrollableImage {
        height:100%;
        width:100%;
        padding:0;
        margin:0;
        overflow-y:scroll;
        overflow-x:scroll;
        display:block;
    }
    JS
    Code:
    document.body.addEventListener('load', function () {
        var image = document.getElementById('actualImage');
        image.onload = function () {
            var height = this.height;
            var width = this.width;
            var div = document.getElementById('imageDiv');
            div.scrollTop = height / 2;
            div.scrollLeft = width / 2;
        };
    });
    I haven't tested this... But in theory; I can't see why it wouldn't work...
    The only issue might be the scrollTop and scrollLeft math which i'll leave you to figure out

    unless you need help, then you can just ask for it.
    Who needs a Signature?

    Comment

    Working...
    X