Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>ologons talantis - interactive DHTML</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <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; |
| width: 100%; |
| height: 100%; |
| background:#000; |
| } |
| #screen { |
| position: absolute; |
| width: 891px; |
| height: 550px; |
| left: 50%; |
| top: 50%; |
| margin-left:-445px; |
| margin-top:-275px; |
| background: #111; |
| overflow: hidden; |
| } |
| #screen .grid { |
| position: absolute; |
| background: #333; |
| font-size: 0px; |
| overflow: hidden; |
| } |
| #screen .txt { |
| position: absolute; |
| font-size: 14px; |
| color: #fff; |
| font-family: arial; |
| overflow: hidden; |
| } |
| #screen .menu { |
| position: absolute; |
| font-size: 12px; |
| color: #fff; |
| font-family: arial; |
| overflow: hidden; |
| cursor: pointer; |
| } |
| #screen .menubackgroundcolor { |
| opacity: 0.7; |
| filter: alpha(opacity=70); |
| } |
| #screen .wrapper { |
| position:absolute; |
| left: 2%; |
| top: 2%; |
| width: 96%; |
| height: 96%; |
| overflow: hidden; |
| } |
| #screen .wrapper img { |
| float: left; |
| margin-right: 6px; |
| margin-bottom: 0px; |
| } |
| #screen h1 { |
| position:relative; |
| top: 20px; |
| width: 100%; |
| text-align: center; |
| letter-spacing: 0px; |
| font-size: 2.5em; |
| } |
| #screen .menucontent { |
| position: absolute; |
| width: 100%; |
| text-align: center; |
| font-size: 128px; |
| letter-spacing: 0px; |
| font-weight: bold; |
| top: -10px; |
| } |
| #screen .submenucontent { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| #screen .submenutitle { |
| position: absolute; |
| top: -12px; |
| font-size: 64px; |
| font-weight: bold; |
| } |
| #screen .submenu { |
| position: absolute; |
| width: 100%; |
| top: 55px; |
| } |
| #screen .submenuline { |
| position: relative; |
| height: 18px; |
| font-size: 14px; |
| margin-top: 1px; |
| } |
| #screen .lineover { |
| background: #fff; |
| color: #0064a0; |
| font-weight: bold; |
| } |
| #loader { |
| position:absolute; |
| left: 50%; |
| top: 50%; |
| width: 50px; |
| margin-left: -25px; |
| margin-top: -14px; |
| text-align: center; |
| font-family: arial; |
| font-size: 24px; |
| font-weight: bold; |
| color: #fff; |
| background: #000; |
| outline: #111 solid 3px; |
| opacity: 0.6; |
| filter: alpha(opacity=60); |
| z-index: 1000; |
| } |
| #htmlBank { |
| display: none; |
| visibility: hidden; |
| } |
| </style> |
| <script type="text/javascript"> |
| /* ================================================================================ |
| * ===== ologons talantis ===== |
| * |
| * JavaScript written by Gerard Ferrandez |
| * http://www.dhteumeuleu.com |
| * Date: Fri May 14, 2010 |
| * Last Update: Wednesday 9 June, 2010 22:03 CET |
| * |
| * Use under a CC-BY-NC license |
| * http://www.dhteumeuleu.com/about/license/ |
| * |
| * other credits: |
| * Inspired from http://www.daftalive.com/alive.php |
| * Images from Flickr (EVE online screen captures): |
| * http://www.flickr.com/search/?q=EVE+online&l=deriv&ct=0&mt=all&adv=1&s=int |
| * ================================================================================ */ |
| var dp = function () |
| { |
| // private variables |
| var object = { |
| cell: [], |
| menu: [], |
| text: [] |
| }, |
| scr, imagesPath, params, fullImage, loader, |
| P, Pn, Pt, lastMenuOver, pc, backgroundImage, |
| preload, mibar, nx, ny, nw, nh, sw, sh; |
| /* ===== append HTML Element function ==== */ |
| var appendHTML = function (p) |
| { |
| var i, object = document.createElement(p.tagName); // create HTML element |
| for (i in p.attributes) object[i] = p.attributes[i]; // copy attributes |
| for (i in p.style) object.style[i] = p.style[i]; // copy style properties |
| if (p.parentNode) p.parentNode.appendChild(object); // insert object |
| return object; |
| }; |
| /* ===== copy JS object ==== */ |
| var clone = function (obj) |
| { |
| if (typeof(obj) != "object" || obj == null) return obj; |
| var newObj = obj.constructor(); |
| for (var i in obj) newObj[i] = clone(obj[i]); |
| return newObj; |
| } |
| /* ==== text constructor ==== */ |
| var Text = function () |
| { |
| // text content |
| this.div = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: |
| { |
| className: "txt", |
| onmouseover: function () { hideLastMenu(); } |
| } |
| }); |
| this.css = this.div.style; |
| }; |
| Text.prototype = |
| { |
| /* ==== start typewriter ==== */ |
| startTypewriter: function (t) |
| { |
| this.k = 0; |
| this.html = t.id ? ( |
| document.getElementById(t.id) ? |
| document.getElementById(t.id).innerHTML : t.id + " undefined" |
| ) : t.html + " "; |
| this.html = this.html.replace(/\n/g, ""); |
| this.l = this.html.length; |
| this.css.visibility = "visible"; |
| this.css.left = Math.round(t.x * sw) + "px"; |
| this.css.top = Math.round(t.y * sh) + "px"; |
| this.css.width = Math.round(t.w * sw) + "px"; |
| this.css.height = Math.round(t.h * sh) + "px"; |
| this.div.innerHTML = ""; |
| // typewriter loop |
| var self = this; |
| this.interval = setInterval( |
| function () { self.typeLoop(); } |
| , 32); |
| }, |
| /* ==== skip HTML tag ==== */ |
| skipTag: function() |
| { |
| if (this.html.charAt(this.k) === "<") |
| this.k += this.html.slice(this.k).indexOf(">") + 1; |
| }, |
| /* ==== typewriter loop ==== */ |
| typeLoop: function () |
| { |
| if (this.k <= this.l) |
| { |
| this.skipTag(); |
| var n = this.html.slice(this.k).indexOf(" "); |
| this.k += (n >= 0) ? n : 1; |
| this.skipTag(); |
| this.div.innerHTML = this.html.slice(0, this.k++); |
| } |
| else |
| { |
| clearInterval(this.interval); |
| this.interval = false; |
| } |
| } |
| }; |
| /* ==== menu constructor ==== */ |
| var Menu = function (n, p) |
| { |
| // menu wrapper |
| this.div = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: |
| { |
| parent: this, |
| className: "menu", |
| onclick: function () { this.parent.click(); }, |
| onmouseover: function () { this.parent.over(); } |
| }, |
| style: { visibility: "hidden" } |
| }); |
| // Color backround |
| var bgc = appendHTML({ |
| parentNode: this.div, |
| tagName: "div", |
| attributes: { className: "menubackgroundcolor" }, |
| style: { position: "absolute" } |
| }); |
| this.bgc = bgc.style; |
| // menu container |
| this.menuDiv = appendHTML({ |
| parentNode: this.div, |
| tagName: "div", |
| attributes: |
| { |
| parent: this, |
| className: "menucontent", |
| innerHTML: p.html, |
| onclick: function () { this.parent.click(); }, |
| onmouseover: function () { this.parent.over(); } |
| } |
| }); |
| this.css = this.div.style; |
| this.pageTarget = p.target; |
| // sub menu construction |
| if (p.submenu) |
| { |
| this.submenuDiv = appendHTML({ |
| tagName: "div", |
| parentNode: this.div, |
| attributes: { className: "submenucontent" }, |
| style: { visibility: "hidden" } |
| }); |
| // title |
| if (p.submenu.title) |
| { |
| appendHTML({ |
| parentNode: this.submenuDiv, |
| tagName: "div", |
| attributes: |
| { |
| className: "submenutitle", |
| innerHTML: p.submenu.title, |
| onclick: function () { |
| resetLoops(); |
| Pt = P.text; |
| displayPage(); |
| return false; |
| } |
| } |
| }); |
| } |
| // submenu container |
| this.submenuContent = appendHTML({ |
| parentNode: this.submenuDiv, |
| tagName: "div", |
| attributes: { className: "submenu" } |
| }); |
| // submenu lines |
| this.menuitem = []; |
| var i = 0, o; |
| while (o = p.submenu.lines[i++]) |
| { |
| this.menuitem.push( |
| new Submenuitem(this, o) |
| ); |
| } |
| } |
| }; |
| Menu.prototype = |
| { |
| /* ==== menu over ==== */ |
| over: function () |
| { |
| if (this.pageTarget != Pn && lastMenuOver != this) |
| { |
| hideLastMenu(); |
| lastMenuOver = this; |
| this.menuDiv.style.visibility = "visible"; |
| /* ---- flash ---- */ |
| this.c = clone(params.flash); |
| var self = this, k = 0; |
| var overflash = function () |
| { |
| if (k++ < 12) |
| { |
| self.fadeColor(0.2); |
| setTimeout(overflash, 32); |
| } |
| else self.fadeColor(0); |
| }; |
| overflash(); |
| } |
| }, |
| /* ==== menu click ==== */ |
| click: function () |
| { |
| var t = this.pageTarget; |
| if (t !== Pn && params.page[t]) |
| { |
| // new page |
| resetLoops(); |
| Pn = t; |
| P = params.page[t]; |
| Pt = P.text; |
| displayPage(); |
| } |
| }, |
| /* ==== target move ==== */ |
| move: function (i) |
| { |
| // targets |
| this.xt = P.menuTarget[i].x; |
| this.yt = P.menuTarget[i].y; |
| this.ct = clone(P.menuBackgroundColor); |
| // init menu dimension |
| this.css.visibility = "visible"; |
| this.css.width = this.bgc.width = Math.round(sw - 1) + "px"; |
| this.css.height = this.bgc.height = Math.round(sh - 1) + "px"; |
| // content visibility |
| this.menuDiv.style.visibility = (this.pageTarget === Pn) ? "visible" : "hidden"; |
| if (this.submenuDiv) this.displayMenuitem(false); |
| // moving menu loop |
| var self = this; |
| this.interval = setInterval( |
| function () { self.moving(); } |
| , 32); |
| }, |
| fadeColor: function (speed) |
| { |
| // transition |
| if (speed) |
| { |
| this.c.r += (this.ct.r - this.c.r) * speed; |
| this.c.g += (this.ct.g - this.c.g) * speed; |
| this.c.b += (this.ct.b - this.c.b) * speed; |
| } |
| else this.c = clone(this.ct); |
| // HTML background color |
| this.bgc.backgroundColor = "RGB(" |
| + Math.round(this.c.r) + "," |
| + Math.round(this.c.g) + "," |
| + Math.round(this.c.b) + ")"; |
| }, |
| /* ==== move ==== */ |
| moving: function () |
| { |
| // distance to target |
| var speed = 0; |
| var dx = this.xt - this.x; |
| var dy = this.yt - this.y; |
| if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01) |
| { |
| // inc position |
| this.x += dx * .2; |
| this.y += dy * .2; |
| speed = 0.1; |
| } |
| else |
| { |
| // init values |
| this.x = this.xt; |
| this.y = this.yt; |
| // stop animation |
| clearInterval(this.interval); |
| // submenu |
| if (this.submenuDiv && this.pageTarget === Pn) |
| { |
| // display submenu |
| this.menuDiv.style.visibility = "hidden"; |
| this.displayMenuitem(true); |
| } |
| } |
| // update HTML |
| this.css.left = Math.round(this.x * sw) + "px"; |
| this.css.top = Math.round(this.y * sh) + "px"; |
| this.fadeColor(speed); |
| }, |
| /* ---- show menu items ---- */ |
| displayMenuitem: function (visible) |
| { |
| var i = 0, o, menuitem = this.menuitem; |
| while (o = menuitem[i++]) o.div.style.visibility = "hidden"; |
| this.submenuDiv.style.visibility = "hidden"; |
| if (visible) |
| { |
| i = 0; |
| this.submenuEnabled = true; |
| var self = this; |
| var displayMenuitem = function () |
| { |
| var o = menuitem[i++]; |
| if (o && self.submenuEnabled) |
| { |
| o.div.style.visibility = "visible"; |
| // complementary bar colors |
| o.bar.style.background = "RGB(" + |
| Math.round((256 - P.menuBackgroundColor.r) * 0.25) + "," + |
| Math.round((256 - P.menuBackgroundColor.g) * 0.25) + "," + |
| Math.round((256 - P.menuBackgroundColor.b) * 0.25) + ")"; |
| setTimeout(displayMenuitem, 64); |
| } |
| }; |
| setTimeout(displayMenuitem, 256); |
| this.submenuDiv.style.visibility = "visible"; |
| } else this.submenuEnabled = false; |
| } |
| }; |
| /* ==== sub menu item constructor ==== */ |
| var Submenuitem = function (parent, p) |
| { |
| this.parent = parent; |
| this.text = p.text; |
| this.k = 100; |
| this.fullImage = p.fullImage; |
| this.div = appendHTML({ |
| tagName: "div", |
| parentNode: parent.submenuContent, |
| attributes: |
| { |
| className: "submenuline", |
| parent: this, |
| onclick: function () { this.parent.click(); }, |
| onmouseover: function () { this.parent.over(); } |
| } |
| }); |
| this.bar = appendHTML({ |
| tagName: "div", |
| parentNode: this.div, |
| style: |
| { |
| position: "absolute", |
| width: "100%", |
| height: "100%", |
| left: "100%" |
| } |
| }); |
| this.txt = appendHTML({ |
| tagName: "div", |
| parentNode: this.div, |
| attributes: |
| { |
| innerHTML: p.html |
| }, |
| style: |
| { |
| position: "absolute", |
| marginLeft: "10px" |
| } |
| }); |
| }; |
| /* ---- menu items functions ---- */ |
| Submenuitem.prototype = |
| { |
| /* ---- select ---- */ |
| click: function () |
| { |
| resetLoops(); |
| resetText(); |
| Pt = this.text; |
| if (this.fullImage) |
| { |
| // display full image |
| fullImage = this.fullImage; |
| displayPage(); |
| } |
| // update text |
| else nextText(); |
| }, |
| /* ---- bar left ---- */ |
| over: function () |
| { |
| mibar = this; |
| var i = 0, o; |
| while (o = this.parent.menuitem[i++]) if (o != this && !o.r) o.out(); |
| var self = this; |
| this.r = false; |
| var barLeft = function () |
| { |
| if (self === mibar) |
| { |
| self.bar.style.left = Math.round(self.k *= .25) + "%"; |
| if (Math.round(self.k) > 0) setTimeout(barLeft, 32); |
| } |
| }; |
| barLeft(); |
| }, |
| /* ---- bar right ---- */ |
| out: function () |
| { |
| if (this.k < 100) |
| { |
| if (this.k < 1) this.k = 1; |
| var self = this; |
| this.r = true; |
| var barRight = function () |
| { |
| self.bar.style.left = Math.round(self.k *= 2) + "%"; |
| if (Math.round(self.k) < 100) setTimeout(barRight, 32); |
| }; |
| barRight(); |
| } |
| } |
| }; |
| /* ==== cell constructor ==== */ |
| var Cell = function (n, x, y) |
| { |
| this.n = n; |
| this.x0 = x; |
| this.y0 = y; |
| // next directions |
| this.dir = [ |
| (x - 1 >= 0 ? n - ny : n), |
| (x + 1 < nx - 1 ? n + ny : n), |
| (y - 1 >= 0 ? n - 1 : n), |
| (y + 1 < ny - 1 ? n + 1 : n) |
| ]; |
| // fade in-out div |
| this.opc = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: |
| { |
| onmouseover: function () { hideLastMenu(); } |
| }, |
| style: |
| { |
| position: "absolute", |
| filter: "alpha(opacity=100)", |
| opacity: 1, |
| background: "#000", |
| left: Math.round(x * sw) + "px", |
| top: Math.round(y * sh) + "px", |
| width: Math.round(sw - 1) + "px", |
| height: Math.round(sh - 1) + "px" |
| } |
| }); |
| // white flash div |
| this.fla = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| style: |
| { |
| position: "absolute", |
| background: "#fff", |
| visibility: "hidden", |
| left: Math.round(x * sw) + "px", |
| top: Math.round(y * sh) + "px", |
| width: Math.round(sw - 1) + "px", |
| height: Math.round(sh - 1) + "px" |
| } |
| }); |
| // grid horizontal |
| if (x == 0 && y > 0) |
| { |
| this.hor = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: { className: "grid" }, |
| style: |
| { |
| top: Math.round(y * sh - 1) + "px", |
| width: nw + "px", |
| height: "1px" |
| } |
| }); |
| } |
| // grid vertical |
| if (y == 0 && x > 0) |
| { |
| this.ver = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: { className: "grid" }, |
| style: |
| { |
| left: Math.round(x * sw - 1) + "px", |
| width: "1px", |
| height: nh + "px" |
| } |
| }); |
| } |
| }; |
| Cell.prototype = |
| { |
| /* ==== crossbrowser opacity function ==== */ |
| opacity: function (alpha) |
| { |
| if (this.opc.filters && this.opc.filters.alpha) |
| { |
| // redefine function for IE<9 |
| Cell.prototype.opacity = function (alpha) |
| { |
| this.opc.filters.alpha.opacity = Math.round(alpha); |
| }; |
| this.opacity(alpha); |
| } |
| else |
| { |
| // redefine function for CSS3 |
| Cell.prototype.opacity = function (alpha) |
| { |
| this.opc.style.opacity = alpha * 0.01; |
| }; |
| this.opacity(alpha); |
| } |
| }, |
| /* ==== display image ==== */ |
| displayCell: function () |
| { |
| // mark cell as displayed |
| this.displayed = true; |
| // flash |
| this.fla.style.visibility = "visible"; |
| // fading loop |
| var self = this; |
| this.interval = setInterval( |
| function () { self.displayCellLoop(); } |
| , 32); |
| }, |
| /* ==== display cell loop ==== */ |
| displayCellLoop: function () |
| { |
| var o; |
| if (this.alpha !== this.alphaTarget) |
| { |
| // opacity |
| this.alpha += this.step; |
| this.opacity(this.alpha); |
| // find next cell |
| if (this.alpha === this.nextCell) |
| { |
| var i = 0, |
| s = false; |
| while (i++ < 8) |
| { |
| o = object.cell[ |
| this.dir[Math.floor(Math.random() * 4)] |
| ]; |
| // cell is available |
| if (!o.displayed) |
| { |
| o.displayCell(); |
| s = true; |
| break; |
| } |
| } |
| if (!s) |
| { |
| // find new starting point |
| o = startingCell(); |
| if (o !== false) o.displayCell(); // next cell |
| else this.startNext = true; // the end |
| } |
| } |
| // stop flash |
| if (this.alpha === this.endFlash) this.fla.style.visibility = "hidden"; |
| if (this.startNext && this.alpha === this.nextStep) |
| { |
| // start typeWriter |
| if (this.txt && (this.id || this.html)) object.text[pc].startTypewriter(this); |
| // next phase |
| if (P.text[pc] && !fullImage) nextText(); |
| } |
| } |
| else |
| { |
| // stop animation loop |
| clearInterval(this.interval); |
| this.interval = false; |
| this.fla.style.visibility = "hidden"; |
| } |
| } |
| }; |
| /* ==== return random available cell ==== */ |
| var startingCell = function () |
| { |
| var o, i = 0, avail = []; |
| while (o = object.cell[i++]) if (!o.displayed) avail.push(o); |
| if (!avail.length) return false; // no available cell |
| else |
| { |
| // return random available cell |
| return avail[ |
| Math.floor(Math.random() * avail.length) |
| ]; |
| } |
| }; |
| /* ==== initialize cells ==== */ |
| var initCell = function (p, fx, txt) |
| { |
| var i = 0, o; |
| while (o = object.cell[i++]) |
| { |
| // is Cell active |
| if (o.x0 >= p.x && o.x0 <= (p.x + p.w - 1) && |
| o.y0 >= p.y && o.y0 <= (p.y + p.h - 1)) |
| { |
| // copy variables |
| o.displayed = false; |
| o.startNext = false; |
| o.id = false; |
| o.txt = txt; |
| for (var j in p) o[j] = p[j]; |
| for (var k in fx) o[k] = fx[k]; |
| } |
| } |
| }; |
| /* ==== reset text ==== */ |
| var resetText = function () |
| { |
| // reset text containers |
| pc = 0; |
| var i = 0, o; |
| while (o = object.text[i++]) |
| { |
| o.div.innerHTML = ""; |
| o.css.visibility = "hidden"; |
| } |
| // reset opacity |
| i = 0; |
| while (o = object.cell[i++]) |
| { |
| o.t = true; |
| o.opacity(0); |
| } |
| }; |
| /* ==== display next bloc text ==== */ |
| var nextText = function () |
| { |
| var o = Pt[pc++]; |
| if (o) |
| { |
| initCell(o, params.fadeout, true); |
| o = startingCell(); |
| o.displayed = true; |
| o.displayCell(); |
| } |
| }; |
| /* ==== menu mouse out ==== */ |
| var hideLastMenu = function () |
| { |
| if (lastMenuOver) |
| { |
| lastMenuOver.menuDiv.style.visibility = "hidden"; |
| lastMenuOver = false; |
| } |
| }; |
| /* ==== reset setIntervals ==== */ |
| var resetLoops = function () |
| { |
| if (preload) { |
| clearInterval(preload); |
| preload = false; |
| } |
| var i, j, k, o; |
| for (j in object) |
| { |
| k = object[j]; |
| i = 0; |
| while (o = k[i++]) |
| { |
| if (o.interval) |
| { |
| // stop loop |
| clearInterval(o.interval); |
| o.interval = false; |
| // stop flash |
| if (o.fla) o.fla.style.visibility = "hidden"; |
| } |
| } |
| } |
| }; |
| /* ==== images display sequence ==== */ |
| var displayPage = function () |
| { |
| var i, j, m, o; |
| // reset |
| lastMenuOver = false; |
| resetText(); |
| if (!fullImage) |
| { |
| // move Menus |
| i = 0; |
| while (o = object.menu[i]) o.move(i++); |
| // background images |
| var img = P.backgroundImage; |
| } |
| else |
| { |
| // full Image |
| var img = fullImage; |
| // hide Menus |
| i = 0; |
| while (o = object.menu[i++]) o.css.left = "-1000px"; |
| } |
| // preload image |
| var timeout = params.timeout; |
| var preloadImg = new Image(); |
| preloadImg.src = imagesPath + img; |
| /* ---- loading function ---- */ |
| var preloading = function () |
| { |
| if ((preloadImg.complete && preloadImg.width) || timeout === 0) |
| { |
| // load complete - hide loader |
| loader.innerHTML = ""; |
| loader.style.visibility = "hidden"; |
| // hide image |
| var i = 0, o; |
| while (o = object.cell[i++]) |
| { |
| o.opacity(100); |
| if (fullImage) |
| { |
| // close full image |
| o.opc.style.cursor = "pointer"; |
| o.opc.onclick = function () |
| { |
| resetLoops(); |
| fullImage = false; |
| Pt = P.text; |
| displayPage(); |
| } |
| } |
| else |
| { |
| o.opc.style.cursor = "default"; |
| o.opc.onclick = null; |
| } |
| } |
| // display background image |
| var css = backgroundImage.style; |
| if (timeout > 0) |
| { |
| backgroundImage.src = imagesPath + img; |
| css.left = Math.round((nw - preloadImg.width) * 0.5) + "px"; |
| css.top = Math.round((nh - preloadImg.height) * 0.5) + "px"; |
| css.visibility = "visible"; |
| } |
| else css.visibility = "hidden"; |
| setTimeout(function() { |
| // display image |
| initCell( |
| { |
| x: 0, |
| y: 0, |
| w: nx, |
| h: ny |
| }, |
| params.fadein, false |
| ); |
| // random starting point |
| o = startingCell(); |
| o.displayed = true; |
| o.displayCell(); |
| }, 64); |
| } |
| else |
| { |
| // waiting |
| timeout--; |
| if (timeout < params.timeout - 3) |
| { |
| // display ajax loader |
| loader.style.visibility = "visible"; |
| loader.innerHTML = (params.timeout - timeout - 3); |
| } |
| preload = setTimeout(preloading, 64); |
| } |
| }; |
| preloading(); |
| }; |
| //////////////////////////////////////////////////////////////////////////// |
| /* ==== screen dimensions ==== */ |
| var resize = function () |
| { |
| nw = scr.offsetWidth; |
| nh = scr.offsetHeight; |
| sw = Math.round(nw / nx); |
| sh = Math.round(nh / ny); |
| }; |
| /* ==== init script ==== */ |
| var init = function (p) |
| { |
| var k, i, j, o; |
| params = p; |
| scr = document.getElementById(p.containerID); |
| nx = p.gridX; |
| ny = p.gridY; |
| imagesPath = p.imagesPath; |
| Pn = 0; |
| P = p.page[Pn]; |
| Pt = P.text; |
| resize(); |
| // create background image |
| backgroundImage = appendHTML({ |
| parentNode: scr, |
| tagName: "img", |
| style: |
| { |
| position: "absolute", |
| visibility: "hidden" |
| } |
| }); |
| // ajax loader |
| loader = appendHTML({ |
| parentNode: scr, |
| tagName: "div", |
| attributes: { id: "loader" }, |
| style: { visibility: "hidden" } |
| }); |
| // create cells |
| k = 0; |
| for (i = 0; i < nx; i++) |
| { |
| for (j = 0; j < ny; j++) |
| { |
| object.cell.push( |
| new Cell(k++, i, j) |
| ); |
| } |
| } |
| // create txt objects |
| for (i = 0; i < 6; i++) |
| { |
| object.text.push( |
| new Text() |
| ); |
| } |
| // create menu objects |
| i = 0; |
| while (o = p.menu[i]) |
| { |
| object.menu.push( |
| new Menu(i++, o) |
| ); |
| } |
| // load first page |
| setTimeout( |
| function () { displayPage(); } |
| , 250); |
| }; |
| return { |
| // initialize script |
| init : init |
| } |
| }(); |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| <div id="htmlBank"> |
| <div id="txt1"> |
| <div class="wrapper"> |
| <img src="../images/graphicID_2684_grey.jpg">Büdolös mutaragran thamar so, ad dobiko gididols utans tak, lit enegenükoms esovob jäfikol-li iv. Län kilas menamödotis tu, dalilomöv osaunikob ukravom ati fa, domi fred da söl. Ifi higok pacödetön vo, ela cödale eperon ofalons lo, bü blinön fasilikum matedafideda bod. |
| <br><br><img src="../images/graphicID_2664_grey.jpg"> |
| Änu bodeds votiki dö, fanön ritan tedön de oka. Begom dalilomöv stul dag ob. Ko enegenükoms lelifikam maket maf, efe binob esufob lügons ok, löp givoti odunob-li lo. Degolön vinig sus vü, el denu jöniko kohorti köm. Klaatu barada niktó. |
| </div> |
| </div> |
| <div id="txt2"> |
| <div class="wrapper"> |
| <img src="../images/graphicID_3952_grey.jpg"> |
| Mem sagol-li sukubons me, äsä lü geton louni sapans. Olenükobs-li vomi ün bel, vi binolsös pospearükons vin. No cuk daniel hidünana, zif ba mutaragran vitidabälipedömi. Bem si dugans goldi onegeton, bumotis büdedis ot jol. Ati zü binomöd loveflano utöpio, cil se badik binob ipubon. Oki tu jutedans nendöfiks pasat, iv oba diabis iacobus sagolös, obi ab alphaeus klopön mana. |
| <br><br> |
| <img src="../images/12.jpg"> |
| Yan ologons osämikebobs ma, jepa mans nineve bü yeb. Jep is büdedis paglidolsöd telis, ofi faemik fluks verat üf. Äsä dö bibiinolavanes fluks volut, domi pardols telis ab naf. Ün vöd geton verat, padakipön timül veütikosi one de. Köm büdolös kapa lüdaut zü, mid ga litik taledi verati, is flukis ukravom sap. So kanaänik klöfa nemögik osi, me osavom urias tim. Fa esufob klifs ini, du dünön klinükols büä, petrus pöpe temakäd bu dag. |
| </div> |
| </div> |
| <div id="txt3"> |
| <div class="wrapper"> |
| <img src="../images/graphicID_3018_grey.jpg"> |
| Us bodi eleigädol lägüptän tem, ix büdedis kilas lanan oms. Po galädanefa neodons nämädikum div, gö dotolsöv esasenols pöpa eli. Lätikan sevob tälen it iui, cif kildeg möbemi sümon el. Bü ililoms kitimo leklära ele, ome lä bibinolavanas elovegivol, fulons olikis temunods gö tab. Kinikis-li lebeg at bos, dünanes klinükols mid it. Ekälols ioatham pardols se änu, klinükols ladäls tils dat vü. Beg vo isufof prodi, klotem pöti temunods omi ba, gospul taledi vönaoloveikod ye pöp. |
| <br><br> |
| <img src="../images/graphicID_1199_grey.jpg"> |
| Ini mebön zitevon ön. Plä lo kudols-li oglidols taläntis, ga döbotis kime kohorti igo, do ofs jabata panemof-li. Tem benodi guverale pelöpükols se, lio ya ladäls notükolsöd, vom ko neflenis pöpa sufälön. Iv maf ekobikons godi lecenolsöd, mem se padeidön pardols. Ta folmilanas telid nek, num tä atanes disi pardols. Bil kü aminadab foginan pejonedon, sui edabinon latik temi ed, bu get lecedons luslugols timü. |
| </div> |
| </div> |
| <div id="txt4"> |
| <div class="wrapper"> |
| <img src="../images/graphicID_1185_grey.jpg"> |
| Caiphas pöpe sofälik ek liö, ün lif telans zibi. Iboidom latik pamojedon ye kas, flukis mutols sid nö. Me fred penegenükoms viän bod, di dekömomöd dünön fenig plu. Fluks obläfom zunon-li et plä, us fenols foginani kela nen. Sep se ledutoti magot prodi, fo sal binob geran, vio mö finots pafölon sufälön. |
| <br><br> |
| <img src="../images/graphicID_2564_grey.jpg"> |
| At esasenols olik pöpe son, foi letuvatam temakäd viän kü. Binolsös figabim soelik mot pö. Flukön klotem sökolöd no iui, bel bi getedön pakrodön ukravom. Ut guverale lebeg olifon mal, kü alphaeus givoti löf. |
| </div> |
| </div> |
| <div id="txt41"> |
| <div class="wrapper"> |
| <img src="../images/graphicID_3215_grey.jpg"> |
| Pöfans vinig sui vo, ods flitäms vipi volut bi. No ata maita nemögik timül, ni binobs klopön okälom nos. Ols me klop posavon sejedon, ai lägüptän tedön unoädol jüs. Ya futi okoedoms vilon ofs, ya beg blods podesumon. </div> |
| </div> |
| <div id="thumb1"> |
| <img src="../images/thu_eve04.jpg"> |
| </div> |
| <div id="thumb2"> |
| <img src="../images/thu_eve05.jpg"> |
| </div> |
| <div id="thumb3"> |
| <img src="../images/thu_eve02.jpg"> |
| </div> |
| </div> |
| <script type="text/javascript"> |
| /* ==== script parameters ==== */ |
| setTimeout(function () |
| { |
| dp.init( |
| { |
| containerID: "screen", |
| gridX: 6, |
| gridY: 4, |
| imagesPath: "../images/", |
| timeout: 153, // 10 seconds |
| flash: { r: 255, g: 255, b: 255}, |
| fadein: |
| { |
| alpha: 100, |
| alphaTarget: 0, |
| step: -5, |
| endFlash: 80, |
| nextCell: 90, |
| nextStep: 0 |
| }, |
| fadeout: |
| { |
| alpha: 0, |
| alphaTarget: 60, |
| step: 5, |
| endFlash: 20, |
| nextCell: 10, |
| nextStep: 40 |
| }, |
| menu: [ |
| { |
| html: '1', |
| target: 0 |
| }, |
| { |
| html: '2', |
| target: 1, |
| submenu: { |
| title: '2.dö', |
| lines: [ |
| { |
| html: 'klinükols', |
| text: [{ |
| html: '', |
| x: 0, y: 2, w: 5, h: 1 |
| }, |
| { |
| id: "thumb1", |
| x: 2, y: 0, w: 1, h: 4 |
| }] |
| }, |
| { |
| html: 'temakäd', |
| text: [{ |
| html: ' ', |
| x: 4, y: 0, w: 1, h: 4 |
| }, |
| { |
| id: "thumb2", |
| x: 0, y: 2, w: 5, h: 1 |
| }] |
| }, |
| { |
| html: 'hidünana', |
| text: [{ |
| html: ' ', |
| x: 2, y: 0, w: 1, h: 4 |
| }, |
| { |
| html: ' ', |
| x: 4, y: 0, w: 1, h: 4 |
| }, |
| { |
| id: "thumb3", |
| x: 2, y: 1, w: 3, h: 2 |
| }] |
| }, |
| { |
| html: 'osämikebobs', |
| fullImage: "eve06.jpg" |
| } |
| ] |
| } |
| }, |
| { |
| html: '3', |
| target: 2 |
| }, |
| { |
| html: '4', |
| target: 3 |
| } |
| ], |
| page: [ |
| { // page 1 |
| backgroundImage: "eve01.jpg", |
| menuBackgroundColor: { r: 0, g: 100, b: 160 }, |
| text: [ |
| { |
| html: ' ', |
| x: 0, y: 2, w: 2, h: 2 |
| }, |
| { |
| id: "txt1", |
| x: 4, y: 1, w: 2, h: 2 |
| }, |
| { |
| html: '<h1>büdolös</h1>', |
| x: 4, y: 3, w: 1, h: 1 |
| } |
| ], |
| menuTarget: [ |
| { x: 0, y: 0 }, |
| { x: 1, y: 1 }, |
| { x: 0, y: 3 }, |
| { x: 5, y: 3 } |
| ] |
| }, |
| { // page 2 |
| backgroundImage: "eve02.jpg", |
| menuBackgroundColor: { r: 102, g: 102, b: 51 }, |
| text: [{ |
| html: ' ', |
| x: 5, y: 3, w: 1, h: 1 |
| }, |
| { |
| html: ' ', |
| x: 0, y: 3, w: 1, h: 1 |
| }, |
| { |
| id: "txt2", |
| x: 0, y: 0, w: 3, h: 2 |
| }, |
| { |
| html: '<h1>kanaänik</h1>', |
| x: 5, y: 0, w: 1, h: 1 |
| } |
| ], |
| menuTarget: [ |
| { x: 3, y: 0 }, |
| { x: 1, y: 3 }, |
| { x: 3, y: 3 }, |
| { x: 5, y: 2 } |
| ] |
| }, |
| { // page 3 |
| backgroundImage: "eve03.jpg", |
| menuBackgroundColor: { r: 160, g: 100, b: 0 }, |
| text: [{ |
| html: ' ', |
| x: 0, y: 0, w: 1, h: 1 |
| }, |
| { |
| html: ' ', |
| x: 5, y: 0, w: 1, h: 1 |
| }, |
| { |
| id: "txt3", |
| x: 2, y: 1, w: 3, h: 2 |
| }, |
| { |
| html: '<h1>lägüptän</h1>', |
| x: 5, y: 2, w: 1, h: 1 |
| } |
| ], |
| menuTarget: [ |
| { x: 1, y: 0 }, |
| { x: 1, y: 2 }, |
| { x: 5, y: 3 }, |
| { x: 5, y: 1 } |
| ] |
| }, |
| { // page 4 |
| backgroundImage: "eve04.jpg", |
| menuBackgroundColor: { r: 0, g: 150, b: 150 }, |
| text: [{ |
| id: "txt41", |
| x: 0, y: 3, w: 2, h: 1 |
| }, |
| { |
| id: "txt4", |
| x: 4, y: 2, w: 2, h: 2 |
| }, |
| { |
| html: '<h1>sofälik</h1>', |
| x: 3, y: 3, w: 1, h: 1 |
| } |
| ], |
| menuTarget: [ |
| { x: 2, y: 0 }, |
| { x: 1, y: 0 }, |
| { x: 2, y: 3 }, |
| { x: 5, y: 0 } |
| ] |
| }] |
| }); |
| }, 500); |
| // For a better World, this script is made from 100% post-consumer Recycled Pixels |
| </script> |
| </body> |
| </html> |
Recent Comments
November 25, 2011 (2:28)
November 24, 2011 (2:13)
November 24, 2011 (2:13)