Ciao
la pagina in questione è
http://www.egocentrique.it/cms/
ma è un iframe (wrapper) che punta alla pagina esterna
http://www.egocentrique.it/gallery_js_01.htm.
nel javascript incorporato ho avuto la felice idea di impostare tutti i bakround del css su "transparent" e (magìa di firefox) lo sfondo bianco diventa trasparente e lascia intravvedere l'immagine di sfondo.
Ho provato a visualizzare la pagina con ie e, come temevo, (manco a dirlo) non funziona: qualche suggerimento?
Grazie
il codice completo della pagina è il seguente
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>one day - Interactive DHTML art-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 { position: absolute; margin: 0px; padding: 0px; background: transparent; width: 100%; height: 90%; } #border { position:absolute; width:440px; height:340px; margin-left:-220px; margin-top:-170px; left:50%; top:50%; background:transparent; border:#aaa solid 1px; } #caption { position:absolute; width:440px; height:70px; left:50%; top:50%; margin-left:-220px; margin-top:175px; } #screen { position:absolute; width:400px; height:300px; margin-left:-200px; margin-top:-150px; left:50%; top:50%; background:transparent; } #screen span { position:absolute; overflow:hidden; border:#aaa solid 1px; background:transparent; } #screen img{ position:absolute; left:-32px; top:-32px; cursor: pointer; filter: alpha(opacity=100); } #caption { color: #666; font-family: georgia, 'times new roman', times, veronica, serif; font-size: 1em; text-align: center; } #caption b { font-size: 2em; } </style> <script type="text/javascript"> // =========================================================== // script: Gerard Ferrandez - Ge-1-doot - October 2005 // http://www.dhteumeuleu.com // Updated - Feb 2010 - Namespaced script // =========================================================== // var siM = function () { /* ---- private vars ---- */ var obj = [], scr, spa, cap, img, W, Wi, Hi, wi, hi, Sx, Sy, M; var xb = 0, yb = 0, ob = - 1; ////////////////////////////////////////////////////////// var Nx = 4; //size grid x var Ny = 4; //size grid y var Tx = 3; // image width var Ty = 3; // image height var Mg = 10; // margin var SP = 1; // speed ////////////////////////////////////////////////////////// var Cobj = function (o, x, y) { this.o = o; this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2)))); this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2)))); this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP; this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP; this.x = x; this.y = y; this.l = 0; this.t = 0; this.w = 0; this.h = 0; this.s = -1; this.spa = spa[o].style; this.img = img[o]; this.txt = img[o].alt; this.img.alt = ""; /* center image */ this.img.center = function () { this.style.left = Math.round( -(this.width - Wi) / 2) + "px"; this.style.top = Math.round( -(this.height - Hi) / 2) + "px"; } /* events */ this.img.onclick = function () { obj[o].click(); } this.img.onload = function () { this.center(); } /* initial display */ this.zoom(); } /* zooming loop */ Cobj.prototype.zoom = function() { this.f = false; this.l += this.li * this.s; this.t += this.ti * this.s; this.w += wi * this.s; this.h += hi * this.s; if ((this.s > 0 && this.w < Wi) || (this.s < 0 && this.w > Sx)) { /* loop */ var o = this.o; setTimeout(function() { obj[o].zoom(); }, 16); } else { /* finished */ if (this.s > 0) { this.l = this.ix * M + this.ix * Sx; this.t = this.iy * M + this.iy * Sy; this.w = Wi; this.h = Hi; } else { this.l = this.x * M + this.x * Sx; this.t = this.y * M + this.y * Sy; this.w = Sx; this.h = Sy; } } /* html animation */ this.spa.left = Math.round(this.l) + "px"; this.spa.top = Math.round(this.t) + "px"; this.spa.width = Math.round(this.w) + "px"; this.spa.height = Math.round(this.h) + "px"; this.spa.zIndex = Math.round(this.w); } Cobj.prototype.click = function() { this.img.center(); /* zooming logic */ if (this.s > 0) { this.s = -1; this.zoom(); cap.innerHTML = this.txt; } else if (this.s < 0) { if (ob >= 0) { obj[ob].s = - 1; obj[ob].zoom(); } ob = this.o; this.s = 1; this.zoom(); cap.innerHTML = this.txt; } } /* ====== init script ====== */ var init = function () { /* html elements */ scr = document.getElementById("screen"); spa = scr.getElementsByTagName("span"); img = scr.getElementsByTagName("img"); cap = document.getElementById("caption"); /* variables */ W = scr.offsetWidth; H = scr.offsetHeight; M = W / 40; Sx = (W - (Nx - 1) * M) / Nx; Sy = (H - (Ny - 1) * M) / Ny; Wi = Tx * Sx + (Tx - 1) * M; Hi = Ty * Sy + (Ty - 1) * M; SP = M * Tx * SP; wi = (Wi - Sx) / SP; hi = (Hi - Sy) / SP; /* create objects */ for (var k = 0, i = 0; i < Nx; i++) { for (var j = 0; j < Ny; j++) obj[k] = new Cobj(k++, i, j); } } return { init : init } }(); </script> </head> <body> <div id="border"></div> <div id="screen"> <span>[img]image_slide_01/01.jpg[/img]early[/b] autumn"></span> <span>[img]image_slide_01/02.jpg[/img]material[/b]"></span> <span>[img]image_slide_01/03.jpg[/img]moment[/b]"></span> <span>[img]image_slide_01/04.jpg[/img]carefully[/b] weight the options"></span> <span>[img]image_slide_01/05.jpg[/img]ahead[/b], I told myself"></span> <span>[img]image_slide_01/06.jpg[/img]faith[/b] to work"></span> <span>[img]image_slide_01/07.jpg[/img]rough[/b] tension"></span> <span>[img]image_slide_01/08.jpg[/img]prior[/b] to meditation"></span> <span>[img]image_slide_01/09.jpg[/img]too[/b] long"></span> <span>[img]image_slide_01/10.jpg[/img]deep[/b] breath, too"></span> <span>[img]image_slide_01/11.jpg[/img]you[/b]"></span> <span>[img]image_slide_01/12.jpg[/img]beneath[/b]"></span> <span>[img]image_slide_01/01.jpg[/img]transmission[/b], essential"></span> <span>[img]image_slide_01/02.jpg[/img]nuance[/b]"></span> <span>[img]image_slide_01/03.jpg[/img]meet[/b] through thick and thin"></span> <span>[img]image_slide_01/04.jpg[/img]resist[/b]"></span> </div> <div id="caption">- click - </div> <script type="text/javascript"> // starter siM.init(); </script> </body> </html>
Rispondi quotando
