| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title> - Interactive DHTML demos</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%; |
| cursor: crosshair; |
| } |
| #screen { |
| position: absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| overflow: hidden; |
| } |
| #banner { |
| position: absolute; |
| height: 20%; |
| width: 100%; |
| overflow: hidden; |
| } |
| #rLinkTitle { |
| position: absolute; |
| color: #FFF; |
| font-family: verdana; |
| left: 1%; |
| top: 22%; |
| width: 34%; |
| height: 6%; |
| overflow: hidden; |
| background: #222; |
| } |
| #rLinkCaption { |
| position: absolute; |
| color: #FFF; |
| font-family: verdana; |
| left: 36%; |
| top: 22%; |
| width: 63%; |
| height: 6%; |
| overflow: hidden; |
| background: #222; |
| } |
| #rLinkScreen { |
| position: absolute; |
| top: 29%; |
| height: 70%; |
| left: -10000px; |
| overflow: hidden; |
| } |
| #rLinkZoom { |
| position: absolute; |
| cursor: crosshair; |
| -ms-interpolation-mode: nearest-neighbor; |
| } |
| #banner img { |
| position: absolute; |
| background: #444; |
| top: -2000px; |
| -ms-interpolation-mode: nearest-neighbor; |
| cursor: pointer; |
| border: #000 solid; |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| // ========================================================================= |
| // ===== slide show dhtml ===== |
| // script: Gerard Ferrandez - June 2005 |
| // last update: January 10, 2010 |
| // http://www.dhteumeuleu.com |
| // 3D Terragen pics: Silus - http://silusatrium.no.sapo.pt/galleries01.html |
| // ========================================================================= |
| |
| var xm = -100; |
| var ym = 0; |
| var nx = 0; |
| var ny = 0; |
| var nw = 0; |
| var nh = 0; |
| |
| function resize() |
| { |
| var o = document.getElementById("screen"); |
| nx = o.offsetLeft; |
| ny = o.offsetTop; |
| nw = o.offsetWidth; |
| nh = o.offsetHeight; |
| ssi.resize(); |
| } |
| onresize = resize; |
| |
| document.onmousemove = function(e) |
| { |
| if (window.event) e = window.event; |
| xm = (e.x || e.clientX) - nw * .5 - nx; |
| ym = (e.y || e.clientY) - nh * .5 - ny; |
| } |
| |
| var ssi = { |
| dx : 0, |
| x0 : 0, |
| y0 : 0, |
| iz : false, |
| iL : -1, |
| rL : 0, |
| N : 0, |
| ov : -1, |
| NW : 0, |
| nxi : 0, |
| nyi : 0, |
| nxo : 0, |
| nyo : 0, |
| nho : 0, |
| imgWidth : 0, |
| imgHeight : 0, |
| borWidth : 0, |
| loaded : false, |
| |
| iZoom : function () |
| { |
| if(!ssi.iz) |
| { |
| ssi.rlz.width = Math.round(ssi.nxi) + 'px'; |
| ssi.rlz.height = Math.round(ssi.nyi) + 'px'; |
| ssi.iz = true; |
| ssi.iResize(); |
| ssi.scroll(); |
| } |
| else |
| { |
| ssi.iz = false; |
| ssi.iResize(); |
| } |
| }, |
| |
| slide : function () |
| { |
| if(!ssi.iz && ssi.loaded) |
| { |
| ssi.dx -= xm * .02; |
| var p = ssi.dx % ssi.NW; |
| for(var i = 0; i < ssi.N; i++) |
| { |
| var img = ssi.img[i]; |
| var w = p + i * Math.round(img.w0 + ( 2 * ssi.borWidth)); |
| if (w < - img.w0) w += ssi.NW; |
| else if (w + img.w0 > ssi.NW - img.w0) w -= ssi.NW; |
| img.style.left = Math.round(w) + 'px'; |
| } |
| } |
| setTimeout(ssi.slide, 16); |
| }, |
| |
| scroll : function () |
| { |
| if(ssi.iz) |
| { |
| ssi.xmo = Math.min(ssi.nwo, Math.max(0, ((-ssi.nxo + xm + nw * .5)))); |
| ssi.ymo = Math.min(ssi.nho, Math.max(0, ((-ssi.nyo + ym + nh * .5)))); |
| var x = -ssi.xmo * (ssi.nxi / ssi.nwo) + ssi.xmo; |
| var y = -ssi.ymo * (ssi.nyi / ssi.nho) + ssi.ymo; |
| ssi.x0 += ((ssi.x0 > x) ? -1 : 1) * Math.abs(ssi.x0 - x) * .1; |
| ssi.y0 += ((ssi.y0 > y) ? -1 : 1) * Math.abs(ssi.y0 - y) * .1; |
| ssi.rlz.left = Math.round(ssi.x0) + 'px'; |
| ssi.rlz.top = Math.round(ssi.y0) + 'px'; |
| setTimeout(ssi.scroll, 16); |
| } |
| }, |
| |
| iResize : function () |
| { |
| if(ssi.iz) |
| { |
| ssi.nwo = Math.min(ssi.nxi, Math.round(98 * nw / 100)); |
| ssi.nxo = Math.round((nw - ssi.nwo) / 2); |
| } |
| else |
| { |
| ssi.nho = ssi.rls.offsetHeight; |
| ssi.nyo = ssi.rls.offsetTop; |
| ssi.nwo = Math.round((ssi.nxi / ssi.nyi) * ssi.nho); |
| ssi.nxo = Math.round((nw - ssi.nwo) / 2); |
| } |
| if(ssi.nwo) |
| { |
| ssi.rls.style.width = Math.round(ssi.nwo) + 'px'; |
| ssi.rls.style.left = Math.round(ssi.nxo) + 'px'; |
| } |
| }, |
| |
| disp : function (i) |
| { |
| if (i != ssi.iL) { |
| var img = ssi.img[i]; |
| if (ssi.iL >= 0) ssi.img[ssi.iL].style.borderColor = "#000"; |
| img.style.borderColor = "#FFF"; |
| ssi.iL = i; |
| if(ssi.iz) ssi.iZoom(); |
| document.getElementById("rLinkTitle").innerHTML = img.t; |
| document.getElementById("rLinkCaption").innerHTML = img.a; |
| document.getElementById("rLinkZoom").src = img.src; |
| ssi.nxi = img.w; |
| ssi.nyi = img.h; |
| ssi.iResize(); |
| } |
| }, |
| |
| init : function () |
| { |
| for(var i = 0; i < ssi.N; i++) |
| { |
| var o = ssi.img[i]; |
| o.className = "thumbOut"; |
| o.onmousedown = function () { return false; } |
| o.onclick = function () { ssi.iZoom(); } |
| o.i = i; |
| o.onmouseover = function() |
| { |
| ssi.ov = this.i; |
| ssi.disp(ssi.ov); |
| } |
| } |
| }, |
| |
| oResize : function () |
| { |
| ssi.NW = 0; |
| for(var i = 0; i < ssi.N; i++) |
| { |
| var img = ssi.img[i]; |
| if(img && img.loaded) |
| { |
| img.w0 = (img.w / img.h) * ssi.imgHeight; |
| img.style.left = Math.round(ssi.NW) + 'px'; |
| img.style.top = '0px'; |
| img.style.width = Math.round(img.w0) + 'px'; |
| img.style.height = Math.round(ssi.imgHeight) + 'px'; |
| img.style.borderWidth = Math.round(ssi.borWidth) + 'px'; |
| ssi.NW += img.w0 + ( 2 * ssi.borWidth); |
| } |
| } |
| }, |
| |
| resize : function () |
| { |
| ssi.borWidth = Math.round(1.4 * nh / 100); |
| ssi.imgHeight = document.getElementById("banner").offsetHeight - (2 * ssi.borWidth); |
| ssi.oResize(); |
| ssi.iResize(); |
| ssi.NW = Math.round(ssi.NW); |
| if(!ssi.loaded) ssi.NW = nw; |
| document.getElementById("rLinkTitle").style.fontSize = Math.round(4.5 * nh / 100) + 'px'; |
| document.getElementById("rLinkCaption").style.fontSize = Math.round(2.5 * nh / 100) + 'px'; |
| }, |
| |
| run : function () |
| { |
| ssi.init(); |
| resize(); |
| ssi.slide(); |
| ssi.images_load(); |
| }, |
| load : function () |
| { |
| ssi.rls = document.getElementById("rLinkScreen"); |
| ssi.img = document.getElementById("banner").getElementsByTagName("img"); |
| ssi.rlz = document.getElementById("rLinkZoom").style; |
| ssi.N = ssi.img.length; |
| ssi.run(); |
| }, |
| images_load : function () |
| { |
| var M = 0; |
| for (var i = 0; i < ssi.N; i++) |
| { |
| var img = ssi.img[i]; |
| if (img.complete) |
| { |
| M++; |
| if (!img.loaded && img.width) |
| { |
| img.w = img.width; |
| img.h = img.height; |
| img.t = img.title; |
| img.a = img.alt; |
| img.alt = img.title = ""; |
| img.loaded = true; |
| resize(); |
| if (i == 0 && ssi.ov == -1) ssi.img[0].onmouseover(); |
| } |
| } |
| } |
| if (M < ssi.N) |
| setTimeout(ssi.images_load, 128); |
| else |
| { |
| ssi.loaded = true; |
| resize(); |
| } |
| } |
| } |
| |
| </script> |
| </head> |
| |
| <body> |
| <!-- layout --> |
| <div id="screen"> |
| <div id="banner"> |
| <img title="red sea" alt="Oxymoron: an organized adventure travel." src="../images/redsea.jpg"> |
| <img title="secrets of the past" alt="We are family now." src="../images/secretsofthepast.jpg"> |
| <img title="jagged peaks" alt="We shall never forget that summer." src="../images/jaggedpeaks.jpg"> |
| <img title="twin gate keepers" alt="Adrenaline galore ..." src="../images/twingatekeepers.jpg"> |
| <img title="King Tut's Backyard" alt="There was actual danger." src="../images/kingtutsbackyard.jpg"> |
| <img title="dead volcano" alt="Reality took over." src="../images/deadvolcano.jpg"> |
| <img title="children of the sea" alt="You know, we were too young, all that." src="../images/childrenofthesea.jpg"> |
| <img title="glim passage" alt="But we were not conscious of it." src="../images/glimpassage.jpg"> |
| <img title="sea canyon" alt="An initiatic trip, though." src="../images/seacanyon.jpg"> |
| </div> |
| <div id="rLinkTitle" style=""></div> |
| <div id="rLinkCaption"></div> |
| <div id="rLinkScreen"> |
| <img id="rLinkZoom" alt="" src="o" onmouseover="if(!ssi.iz)ssi.iZoom();" onclick="ssi.iZoom();"> |
| </div> |
| </div> |
| |
| |
| <script type="text/javascript"> |
| // ======= start script ====== |
| ssi.load(); |
| </script> |
| |
| </body> |
| </html> |
so que ria decir que ustedes hacen un óptimo trabajo me impreciona.
yo queria tanto bajar el código no se como hacerlo.
bueno un grande abrazo para todos ustedes, “edgar”
Gone through every demo on the site and I’m blown away ^_^ keep up the creativity!
Simplement génial!!
Si le clin d’oeil à Nibiru est volontaire, c’est très drôle.
good work, congrats! is a excelent effect.
awesome effects, nice work