Os comento, tengo una maginifica galeria de imagenes diseñada en javascript, me gustaria sacar una parte del codigo para utilizarlo en otra parte.
Aqui os lo muestro:
Código HTML:
<!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="http://www.dhteumeuleu.com/images/redsea.jpg"> <img title="secrets of the past" alt="We are family now." src="http://www.dhteumeuleu.com/images/secretsofthepast.jpg"> <img title="jagged peaks" alt="We shall never forget that summer." src="http://www.dhteumeuleu.com/images/jaggedpeaks.jpg"> <img title="twin gate keepers" alt="Adrenaline galore ..." src="http://www.dhteumeuleu.com/images/twingatekeepers.jpg"> <img title="King Tut's Backyard" alt="There was actual danger." src="http://www.dhteumeuleu.com/images/kingtutsbackyard.jpg"> <img title="dead volcano" alt="Reality took over." src="http://www.dhteumeuleu.com/images/deadvolcano.jpg"> <img title="children of the sea" alt="You know, we were too young, all that." src="http://www.dhteumeuleu.com/images/childrenofthesea.jpg"> <img title="glim passage" alt="But we were not conscious of it." src="http://www.dhteumeuleu.com/images/glimpassage.jpg"> <img title="sea canyon" alt="An initiatic trip, though." src="http://www.dhteumeuleu.com/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>
Vale, ahora lo que quiero hacer es sacar el efecto de scroll que hacen las imagenes al pasar el raton por encima de el carrusel (que al ir hacia la izquierda las imagenes vallan a la derecha y viceversa), si puede ser, modificado para hacer ese mismo carrusel pero en vertical, solo quiero el carrusel con imagenes en vertical, donde se pueda picar en una imagen y que me lleve a otro sitio mediante href.
Saludos, espero haberme expresado correctamente.
P.D.: Este efecto de carrusel solo lo habia visto en Flash, por eso mismo lo quiero en java para no tener que acudir a flash, gracias.
