Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>mandatory upgrade - 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: #111; |
| width: 100%; |
| height: 100%; |
| cursor: default; |
| } |
| #screen { |
| position:absolute; |
| left: 0%; |
| top: 10%; |
| width: 100%; |
| height: 80%; |
| background: #000; |
| overflow: hidden; |
| } |
| #screen img { |
| position: absolute; |
| visibility: hidden; |
| left: -10000px; |
| filter: alpha(opacity=100); |
| -ms-interpolation-mode:nearest-neighbor; |
| } |
| #screen div { |
| position: absolute; |
| top: -10000px; |
| font-family: verdana, arial, helvetica, sans-serif; |
| font-weight: bold; |
| text-align: center; |
| filter: alpha(opacity=100); |
| color: #FFF; |
| } |
| #screen .texturl { |
| color: #FF8000; |
| } |
| </style> |
| <script type="text/javascript"> |
| /* |
| ======================================================== |
| script: image3D engine |
| author: Gerard Ferrandez - [Ge1doot] |
| date: April 16, 2008 |
| site: http://www.dhteumeuleu.com |
| license: CC-BY-NC - do not remove this notice |
| ======================================================== |
| */ |
| var i3D = function() { |
| /* ==== private variables and methods ==== */ |
| var O = new Array(100); |
| var N = 0; |
| var scr = false; |
| var xm = 0; |
| var ym = 0; |
| var cx = 0; |
| var cy = -2000; |
| var cz = 0; |
| var zm = 0; |
| var cr = 0; |
| var nx = 0; |
| var ny = 0; |
| var nw = 0; |
| var nh = 0; |
| var cg = false; |
| var mo = false; |
| var path, FL, FS, Z, omob, hlb; |
| /* ===== crossbrowsers events ==== */ |
| function addEvent (o, e, f) { |
| var r = false; |
| if (window.addEventListener) { o.addEventListener(e, f, false); r = true; } |
| else if (window.attachEvent) { r = o.attachEvent('on' + e, f); } |
| return r; |
| } |
| /* ===== append HTML Element ==== */ |
| function Append (tag, att, css) { |
| var object = document.createElement(tag); |
| for( var i in att) object[i] = att[i]; |
| for( var i in css) object.style[i] = css[i]; |
| this.appendChild(object); |
| return object; |
| } |
| /* ===== window resize ==== */ |
| function resize () { |
| var o = scr; |
| for (nx = 0, ny = 0; o != null; o = o.offsetParent) { |
| nx += o.offsetLeft; |
| ny += o.offsetTop; |
| } |
| nw = scr.offsetWidth; |
| nh = scr.offsetHeight; |
| } |
| /* ==== cache xbrowser opacity ==== */ |
| function initOpacity (o) { |
| if (o.filters && o.filters.alpha) { |
| o.alpha = o.filters.alpha; |
| o.opacity = function (alpha) { this.alpha.opacity = Math.round(alpha); } |
| } else { |
| o.alpha = o.style; |
| o.opacity = function (alpha) { this.alpha.opacity = alpha / 100; } |
| } |
| } |
| /* ==== Image3D Constructor ==== */ |
| function Image3D (param) { |
| var options = param[4] || {}; |
| /* ---- image Element ---- */ |
| this.img = scr.append('img', { |
| 'src' : path + param[0], |
| 'onclick' : this.click, |
| 'onmouseover' : this.mover, |
| 'parent' : this |
| } |
| ); |
| this.loaded = false; |
| this.X = param[1]; |
| this.Y = -param[2]; |
| this.Z = param[3]; |
| this.SX = options['zx'] || 1; |
| this.SY = options['zy'] || this.SX; |
| this.xb = 0; |
| this.yb = 0; |
| this.zb = 0; |
| this.ab = 0; |
| this.w2D = 0; |
| this.h2D = 0; |
| this.x2D = 0; |
| this.y2D = 0; |
| this.r = 0; |
| /* ---- link ---- */ |
| this.url = options['url'] || false; |
| var txt = options['txt'] || ''; |
| if (this.url) { |
| txt += '<br><span class="texturl">' |
| + this.url.replace('http://','') |
| + '</span>'; |
| this.img.style.cursor = 'pointer'; |
| } |
| this.icss = this.img.style; |
| initOpacity(this.img); |
| /* ---- text element ---- */ |
| if (txt) { |
| this.txt = scr.append('div', { |
| 'innerHTML' : txt, |
| 'onclick' : this.click, |
| 'parent' : this |
| }, |
| {'width' : '1000px'} |
| ); |
| this.tp = -10000; |
| this.tf = true; |
| this.tcss = this.txt.style; |
| initOpacity(this.txt); |
| } |
| O[N++] = this; |
| } |
| /* ==== prototype images functions ==== */ |
| Image3D.prototype = { |
| /* ---- hide non moving images ---- */ |
| hide : function () { |
| if (this.visible) { |
| this.visible = false; |
| this.img.style.width = '0px'; |
| this.tp = -10000; |
| } |
| }, |
| /* ---- hide text ---- */ |
| txthide : function () { |
| if (this.txtvisible) { |
| this.txtvisible = false; |
| this.txt.style.top = '-10000px'; |
| this.tp = -10000; |
| this.tf = true; |
| } |
| }, |
| /* ---- images onmouseover ---- */ |
| mover : function () { |
| var that = this.parent; |
| /* ---- hover ---- */ |
| if (mo != this) { |
| if (mo) mo.style.border = ""; |
| mo = this; |
| this.style.border = that.url ? hlb : omob; |
| } |
| /* ---- start animation text ---- */ |
| if (that.tf && Math.abs(zm - cz) < 50) { |
| that.tp = 0; |
| that.tf = false; |
| that.tcss.fontSize = (that.r * nh / FS) + 'px' |
| } |
| return false; |
| }, |
| /* ---- images onclick ---- */ |
| click : function() { |
| var that = this.parent; |
| if (that.url) { |
| /* ---- jump to hyperlink ---- */ |
| window.location.href = that.url; |
| } |
| /* ---- go to image ---- */ |
| zm = that.Z + 5; |
| cg = true; |
| return false; |
| }, |
| /* ==== main rendering function ==== */ |
| display : function () { |
| if (this.loaded) { |
| /* ---- 3D coordinates ---- */ |
| var x = this.X - cx; |
| var y = this.Y - cy; |
| var z = this.Z - cz; |
| /* ---- animate text ---- */ |
| if(this.tp > -200) { |
| this.txtvisible = true; |
| this.tp -= 2; |
| this.tcss.left = Math.round(this.x2D + this.w2D * .5 - 500) + 'px'; |
| this.tcss.top = (this.y2D + this.tp + this.h2D * .5) + 'px'; |
| this.tcss.zIndex = Math.round(10000 - z); |
| this.txt.opacity(200 + this.tp); |
| } else this.txthide(); |
| /* ---- image visible ---- */ |
| if (z > 0) { |
| /* ---- 3D to 2D transform ---- */ |
| this.r = FL / (FL + (z * Z)); |
| this.w2D = this.W * this.r * Z * this.SX; |
| this.h2D = this.H * this.r * Z * this.SY; |
| this.x2D = Math.floor((nw * .5) + (x * this.r * Z) - (this.w2D * .5)); |
| this.y2D = Math.floor((nh * .5) + (y * this.r * Z) - this.h2D); |
| /* ---- image in screen ---- */ |
| if (this.x2D + this.w2D > 0 && this.x2D < nw) { |
| this.visible = true; |
| /* ---- image is moving ---- */ |
| if (this.x2D != this.xb || this.y2D != this.yb || z != this.zb) { |
| this.xb = this.x2D; |
| this.yb = this.y2D; |
| this.zb = z; |
| /* ---- html rendering ---- */ |
| this.icss.left = this.x2D + 'px'; |
| this.icss.top = this.y2D + 'px'; |
| this.icss.width = Math.ceil(this.w2D) + 'px'; |
| this.icss.height = Math.ceil(this.h2D) + 'px'; |
| this.icss.zIndex = Math.round(10000 - z); |
| /* ---- fade in/out ---- */ |
| var a = Math.max(0, Math.min(100, z)); |
| if (a != this.ab) { |
| this.ab = a; |
| this.img.opacity(a); |
| } |
| } |
| } else this.hide(); |
| } else this.hide(); |
| } else { |
| /* ==== image onload ==== */ |
| if (this.img.complete && this.img.width) { |
| /* ---- get size image ---- */ |
| this.W = this.img.width; |
| this.H = this.img.height; |
| this.loaded = true; |
| this.img.style.visibility = 'visible'; |
| } |
| } |
| } |
| } |
| /* ==== public methods ==== */ |
| return { |
| /* ---- initialize script ---- */ |
| init : function (container, imagepath, focalLength, zoom, fontSize, onmouseover_border, hyperlink_border, structure) { |
| /* ---- container ---- */ |
| scr = document.getElementById(container); |
| scr.append = Append; |
| if (!scr) return false; |
| /* ---- init ---- */ |
| resize(); |
| path = imagepath; |
| FL = focalLength; |
| FS = fontSize; |
| Z = zoom; |
| omob = onmouseover_border; |
| hlb = hyperlink_border; |
| xm = nx - (document.body.offsetWidth) + nw; |
| ym = -ny - nh * .5; |
| /* ---- camera xy position ---- */ |
| addEvent(window.document, 'mousemove', function(e) { |
| e = e || window.event; |
| xm = nx - (e.clientX * 2) + nw; |
| ym = -ny + (e.clientY * 2) - nh * 2; |
| return false; |
| }); |
| /* ---- image onclick ---- */ |
| addEvent(scr, 'click', function() { |
| if (!cg) zm = 0; |
| cg = false; |
| return false; |
| }); |
| /* ---- window resize ---- */ |
| addEvent(window, 'resize', resize); |
| /* ---- mouse wheel - camera z position ---- */ |
| if (window.addEventListener) scr.addEventListener('DOMMouseScroll', function(e) { |
| if (e.preventDefault) e.preventDefault(); |
| zm += (e.detail * 40); |
| return false; |
| }, false); |
| scr.onmousewheel = function () { |
| zm += (-event.wheelDelta); |
| return false; |
| } |
| /* ---- create objects ---- */ |
| for (var i = 0, n = structure.length; i < n; i++) { |
| var s = structure[i]; |
| var options = s[4]; |
| /* ---- repeat ---- */ |
| var r = options ? options['repeat'] : false; |
| if (r) { |
| for (var j = 0, m = r[1]; j < m; j++) { |
| var ok = new Image3D(s); |
| s[r[0]] += r[2]; |
| } |
| } else var ok = new Image3D(s); |
| } |
| /* ---- launch script ---- */ |
| setInterval(i3D.run, 16); |
| }, |
| /* ---- main loop ---- */ |
| run : function () { |
| /* ---- camera ease ---- */ |
| cx -= Math.round((xm + cx) * .1); |
| cy += Math.round((ym - cy) * .1); |
| cz += Math.round((zm - cz) * .1); |
| /* ---- display loop ---- */ |
| var i = N; |
| while (i--) O[i].display(); |
| } |
| } |
| }(); |
| /* ==== global onload ==== */ |
| onload = function () { |
| /* ---- build structure ---- |
| i3D.init(container, path, focalLength, globalZoom, fontSize, onmouseover_border, hyperlink_border |
| [image, x,y,z, {options}], ... |
| ); |
| options { 'zx':zoom x, 'xy': zoom y, 'url':hyperlink, 'txt':text |
| 'repeat':[axis(1,2,3), number, increment] |
| } |
| */ |
| i3D.init("screen", "../images/", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [ |
| ['bim.jpg', 0,20,1020, {'zx':9, 'zy':.5}], |
| ['r4.gif', -1200,0,1000, {'txt':'duplicated'}], |
| ['r29.gif', 700,0,1000, {'txt':'mechanomorphism'}], |
| ['r15a.gif', -1100,0,900, {'txt':'amniocentetic'}], |
| ['r59.gif', 600,0,500, {'txt':'asphericity'}], |
| ['r39a.gif', -1000,0,200, {'txt':'onomatopoeia'}], |
| ['r65.gif', -400,0,150, {'txt':'therianthrope'}], |
| ['r39c.gif', 400,0,150, {'txt':'arboretum'}], |
| ['r14.gif', 1200,0,250, {'txt':'heliotrope'}], |
| ['r13.gif', 0,0,900, {'txt':'', 'url':'http://www.dhteumeuleu.com'}], |
| ['r74.gif', -400,0,950, {'txt':'santorum'}], |
| ['r74.gif', 400,0,950, {'txt':'taphephobia'}], |
| ['r58c.gif', 700,0,800], |
| ['r58c.gif', 1100,0,800], |
| ['r46a.gif', 900,220,800, {'txt':'philatelical'}], |
| ['r58b.gif', 900,-20,740, {'txt':'salmagundi'}], |
| ['r8.gif', -600,0,800, {'txt':'diverticulectomy'}], |
| ['r67.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}], |
| ['r69.gif', -900,0,750, {'txt':'compersion'}], |
| ['r69.gif', -300,0,750, {'txt':'epicaricacy'}], |
| ['r72.gif', -600,0,600], |
| ['r72.gif', -620,0,580, {'txt':'endomorphy'}], |
| ['r22.gif', 0,0,600, {'txt':'rhamphorhynchus'}], |
| ['r24.gif', 0,0,400, {'txt':'verisimilitudinous'}], |
| ['r62.gif', 0,700,800, {'repeat':[3, 2, -400]}], |
| ['r60.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}], |
| ['r70.gif', 1100,0,600, {'txt':'lollygagger'}], |
| ['r5.gif', -1200,300,600, {'txt':'homophilian'}], |
| ['r6.gif', 1200,300,600, {'txt':'bysectamy'}], |
| ['r54.gif', 0,0,100, {'txt':'iterator'}], |
| ['r64.gif', 500,300,100], |
| ['r38.gif', -900,0,350, {'txt':'protease'}], |
| ['r51.gif', -600,0,400, {'txt':'gallipot'}], |
| ['r52.gif', -300,0,250, {'txt':'temerarious'}], |
| ['r50a.gif', -550,0,300, {'txt':'encyclopedia'}], |
| ['r41.gif', -400,200,1000, {'txt':'paranoid'}], |
| ['r43.gif', 300,400,1000, {'txt':'emboldened'}], |
| ['r48.gif', 900,0,300, {'txt':'somnambulist'}], |
| ['r58b.gif', 900,-20,250, {'txt':'miraculous'}], |
| ['r63.gif', -1000,0,300, {'txt':'sufficiency'}], |
| ['r63.gif', 650,0,320, {'txt':'biometric'}], |
| ['r63.gif', 1000,0,980, {'txt':'baglady'}], |
| ['Bush2.gif', -300,0,-200, {'repeat':[3, 3, -400]}], |
| ['Bush2.gif', 300,0,-200, {'repeat':[3, 3, -400]}] |
| ]); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| </body> |
| </html> |
outstanding work!
say, is there a way to link words to url’s (without showing the url itself)?
would be great
thank you
or rather not words but the objects