Home
Image Effects
Simple Image Panner
Developer's View
<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;
}
</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>