Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?

CSS:

#image{
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    top: 300px;
    background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}

HTML:

<div id="image"></div>

EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.

like image 827
Alex Avatar asked Nov 01 '22 04:11

Alex


1 Answers

<html>
    <body>
        <div style="width:200;height:200;overflow:scroll;">
            <img src="/home/james/Pictures/scone_ontology.png" />
        </div>
    </body>
</html>
like image 183
JamesSchiiller Avatar answered Nov 11 '22 04:11

JamesSchiiller