Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>next thing - interactive DHTML</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <meta http-equiv="imagetoolbar" content="no"> |
| <style type="text/css"> |
| html { |
| overflow: hidden; |
| } |
| body { |
| margin: 0px; |
| padding: 0px; |
| background: #000; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| .thumb { |
| position: relative; |
| float: left; |
| display: block; |
| width: 47%; |
| height: 46%; |
| margin-left: 2%; |
| margin-top: 2%; |
| overflow: hidden; |
| cursor: crosshair; |
| } |
| .thumb img { |
| position: absolute; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ================================================== |
| // ===== images scrolling ==== |
| // script written by Gerard Ferrandez - January 2007 |
| // http://www.dhteumeuleu.com |
| // ================================================== |
| var scr = function () { |
| var thu = []; |
| var run = function (){ |
| var i = 0, o; |
| while (o = thu[i++] ) |
| o.scroll(); |
| setTimeout(run, 16); |
| } |
| var init = function () { |
| var div = document.body.getElementsByTagName('div'); |
| for(var i = 0, n = div.length; i < n; i++) { |
| var o = div[i]; |
| if (o.className.indexOf('thumb') >= 0) { |
| thu.push(o); |
| o.img = o.getElementsByTagName('img')[0]; |
| o.nwi = o.img.width; |
| o.nhi = o.img.height; |
| o.img = o.img.style; |
| o.x0 = 0; |
| o.y0 = 0; |
| o.xm = 0; |
| o.ym = 0; |
| o.onmousemove = function (e) { |
| if (window.event) e = window.event; |
| this.xm = e.clientX; |
| this.ym = e.clientY; |
| } |
| o.scroll = function () { |
| var xmo = Math.min(this.nw, Math.max(0, this.xm - this.nx)); |
| var ymo = Math.min(this.nh, Math.max(0, this.ym - this.ny)); |
| var x = -xmo * (this.nwi / this.nw) + xmo; |
| var y = -ymo * (this.nhi / this.nh) + ymo; |
| this.x0 += ((this.x0 > x) ? -1 : 1) * Math.abs(this.x0 - x) * .1; |
| this.y0 += ((this.y0 > y) ? -1 : 1) * Math.abs(this.y0 - y) * .1; |
| this.img.left = Math.round(this.x0) + 'px'; |
| this.img.top = Math.round(this.y0) + 'px'; |
| } |
| o.onresize = function () { |
| this.nx = 0; |
| this.ny = 0; |
| this.nw = this.offsetWidth; |
| this.nh = this.offsetHeight; |
| for (var o = this; o != null; o = o.offsetParent) { |
| this.nx += o.offsetLeft; |
| this.ny += o.offsetTop; |
| } |
| } |
| o.onresize(); |
| } |
| } |
| run(); |
| } |
| //////////////////////////////////////////////////////////// |
| return { |
| init : init |
| } |
| }(); |
| onload = function(){ |
| scr.init(); |
| } |
| </script> |
| </head> |
| <body> |
| <div class="thumb"><img alt="" src="../images/g3d.jpg"></div> |
| <div class="thumb"><img alt="" src="../images/g4d.jpg"></div> |
| <div class="thumb"><img alt="" src="../images/g7d.jpg"></div> |
| <div class="thumb"><img alt="" src="../images/g8d.jpg"></div> |
| </body> |
| </html> |
