New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<html>
<head>
<style type="text/css">

/*Default CSS for pan containers*/
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden; /*keep this intact*/
width:300px;
height:300px;
border:1px solid black;
}

.pancontainer .zoomcontrols{ /* default CSS class for magnify controls within container */
position:absolute;
width: 30px;
height: 30px;
background: #eee;
border: 1px solid gray;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>

<div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img src="http://i44.tinypic.com/1hezvm.jpg" style="width:700px; height:525px" />
</div>

</body>
</html>

Sweet Ads X