Hola buenas a todos:
Tengo un problema con una intro que estoy haciendo para una web.
El tema es que en explorer 7 e inferiores no se ven los marcos de color azul, para saber a que me refiero deberiais visualizar la intro en explorer 8 y vista de compatibilidad, entonces ahí se ve tal como la quiero. Os pongo el link a la intro y el codigo de la pagina
http://www.kma-productions.hostzi.com/promotora/inicio.html
codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Promotora Bama</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #ffffff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
background: #fff;
left: 50%;
top: 50%;
margin-left: -512px;
margin-top: -384px;
width: 1024px;
height: 768px;
overflow: hidden;
visibility: hidden;
}
#b1 {
position: absolute;
background: #ffffff ;
z-index: 100;
outline: #60AAF6 solid 12px;
border-bottom: #2d2d2d solid 1px;
}
#b2 {
position: absolute;
background: #ffffff ;
z-index: 100;
outline: #60AAF6 solid 12px;
border-top: #2d2d2d solid 1px;
color: #898989;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
#b2 a {text-decoration: none;color:#4a4a4a;}
#b2 a:hover {text-decoration: none;color:#4a4a4a;}
#b2 a:visited {text-decoration: none;color:#4a4a4a;}
#b2 a:visited:hover {text-decoration: none;color:#4a4a4a;}
#b3 {
position: absolute;
background: #60AAF6 ;
z-index: 110;
border-left: #60AAF6 solid 1px;
}
#b4 {
position: absolute;
background: #60AAF6 ;
z-index: 110;
border-right: #60AAF6 solid 1px;
}
#screen .divs {
position: absolute;
left: -9999px;
background: #60AAF6;
overflow: hidden;
outline: #60AAF6 solid 12px;
}
#screen img {
position: absolute;
cursor: pointer;
filter: alpha(opacity=100);
z-index: 1;
}
.html {
visibility: hidden;
}
#screen h1 {
position: absolute;
font-weight: bold;
font-size: 1.3em;
color: #033079;
font-family: arial, helvetica, sans-serif;
margin-left: 40px;
margin-top: 18px;
z-index: 1;
}
#screen .title {
width: 100%;
height: 60px;
background: #CEF1FC url(fond_carre_titre.png) bottom no-repeat;
}
#screen .text {
margin: 10px;
font-size: 0.8em;
color: #9f9f9f;
font-family: arial, helvetica, sans-serif;
text-align: left;
margin-top: 10px;
}
#screen .bul {
position: absolute;
left: -12px;
z-index: 0;
}
#screen .bkgh {
width: 100%;
height: 100%;
background: #fff url(images/fondoinicio.jpg) bottom no-repeat;
}
#screen .bkgc {
width: 100%;
height: 100%;
background: #fff url(images/fondoinicio.jpg) bottom no-repeat;
}
#screen .bkgv {
width: 100%;
height: 100%;
background: #fff url(fond_vertical.png) bottom no-repeat;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
outline:#000 solid 5px;
z-index: 2000;
display: none;
}
</style>
<script type="text/javascript" src="tweens.js"></script>
<script type="text/javascript">
// =============================================================
// script by Gerard Ferrandez | October 18, 2009
// Design by Gabriel Uribe | http://www.gabrieluribe.com/
// ----------------------------------------------------------
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
// work licensed under CC-BY-NC - Do not remove this notice
// =============================================================
var res = function () {
/* ---- private vars ---- */
var imagesPath = "",
scr, dLoad, tre, sto, moving,
compo, prevCompo = "0",
nw = 0,
nh = 0,
wu = 0,
hu = 0,
sc = 0,
ct = [];
/* ---- Compositions ---- */
var content = {
borderWidth : 12,
duration : 600,
coord : {
C01:[[1,3,[-1,1],,0],[1,4,[1,0],,0],[1,6,[5,1],,0],[1,5,[0,3],,1]],
C12:[[1,5,,[0,3],0],[1,3,,[-1,1],1],[1,4,,[0,1],1],[1,6,,[1,1],0],[1,4,,[0,3],1],[2,3,[0,-1],,0],[1,6,,[1,-1],1],[2,6,[1,3],,0],[2,5,[5,1],,0],[2,4,[5,2],,1]],
C13:[[1,3,,[0,0],1],[1,4,,[1,0],1],[1,5,,[0,3],0],[1,6,,[0,1],0],[3,3,[5,1],,0],[3,5,[4,0],,1],[3,4,[4,3],,0],[1,6,,[-3,1],1],[3,6,[3,1,0,2],,1]],
C23:[[2,5,,[4,-1],1],[2,4,,[4,3],0],[3,3,[5,1],[4,1],0],[2,6,,[1,3],1],[3,6,[1,-1],[1,1],0],[2,3,,[-1,1],1],[3,6,[1,1],[0,1],1],[3,3,[4,1],[3,1],0],[3,5,[4,0],,0],[3,4,[4,3],,0]],
C24:[[2,3,,[0,3],0],[2,6,,[2,1,2,2],0],[4,5,[-2,1],,0],[4,3,[-2,2],,0],[2,6,,[2,3,2,2],1],[4,6,[2,-1],,0],[2,5,,[3,1],1],[2,4,,[3,2],1],[4,4,[5,1],,1]],
C34:[[3,3,,[3,-1],0],[3,6,,[2,1,2,2],0],[4,3,[0,3],,1],[4,5,[0,0],,0],[3,5,,[5,1],0],[3,4,,[5,2],0],[3,6,,[5,1],0],[4,6,[2,3],,0],[4,4,[5,1],,1]],
C35:[[3,3,,[2,1],0],[3,5,,[3,1],0],[3,4,,[3,2],0],[3,6,,[0,-1],1],[5,4,[4,-1],,0],[5,6,[-2,1],,0],[3,5,,[3,0],1],[3,4,,[3,3],0],[3,3,,[3,1],0],[3,3,,[3,-1],1],[5,3,[3,3],,1],[5,5,[2,-1],,1]],
C41:[[4,4,,[5,1],0],[4,5,,[0,0],1],[4,3,,[0,3],0],[4,6,,[0,1],0],[1,6,[5,1],[2,1],0],[4,6,,[0,3],0],[1,5,[-2,2],[0,2],0],[1,4,[1,0],[1,1],0],[1,3,[0,0],[0,1],0]],
C42:[[4,5,,[-1,1],1],[4,3,,[-1,2],1],[4,6,,[1,1,3,2],0],[4,5,,[-1,0],1],[4,3,,[-1,3],0],[2,3,[-1,1],,0],[4,4,,[4,3],1],[2,5,[4,-1],,1],[4,6,,[1,-1,3,2],1],[2,6,[1,3],,1]],
C45:[[4,5,,[0,-1],1],[4,3,,[0,3],0],[5,6,[-2,1],,0],[4,6,,[2,1],1],[5,4,[5,1],,1],[4,6,,[2,1,1,2],1],[4,4,,[3,1],0],[4,6,,[2,-1,1,2],1],[5,5,[2,3],,0],[5,3,[3,1],,1],[4,4,,[3,-1],1]],
C51:[[5,4,,[4,3],0],[5,3,,[3,3],0],[5,5,,[2,3],0],[1,6,[5,1],,0],[1,3,[0,3],,1],[1,4,[1,3],,1],[5,6,,[0,-1],0],[1,5,[-2,2],,1]],
C52:[[5,4,,[5,1],0],[5,3,,[5,1],0],[5,5,,[0,1],1],[5,6,,[-2,1],0],[5,5,,[0,-1],1],[2,3,[0,3],,0],[2,6,[5,1],,0],[2,5,[5,1],,0],[2,4,[5,2],,0]]
},
C1 : {
divs : {
"3" : { image: "images/logo.jpg", goto:2, x:0,y:1,w:1,h:1,dx:0,dy:-.5 },
"4" : { image: "images/sec2.jpg", goto:3, x:1,y:1,w:1,h:1,dx:.5,dy:0 },
"5" : { text: "text1", x:0,y:2,w:2,h:1 },
"6" : { image: "images/sec3.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 }
}
},
C2 : {
divs : {
"3" : { image: "images/sec4.jpg", goto:4, x:0,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec5.jpg", goto:3, x:4,y:2,w:1,h:1,dx:0,dy:.5 },
"5" : { text : "text2", x:4,y:1,w:1,h:1 },
"6" : { image : "images/sec7.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 }
}
},
C3 : {
divs : {
"3" : { image: "images/sec9.jpg", goto:4, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec10.jpg", goto:5, x:4,y:2,w:1,h:1,dx:0,dy:-.5 },
"5" : { text : "text3", x:4,y:1,w:1,h:1 },
"6" : { image : "images/sec8.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 }
}
},
C4 : {
divs : {
"3" : { image: "images/sec12.jpg", goto:5, x:0,y:2,w:2,h:1,dx:0,dy:.5 },
"4" : { image: "images/sec13.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
"5" : { text : "text4", x:0,y:1,w:2,h:1 },
"6" : { image : "images/sec11.jpg", x:2,y:1,w:2,h:2,ox:.2,oy:.5 }
}
},
C5 : {
divs : {
"3" : { image: "images/sec15.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec16.jpg", goto:2, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
"5" : { text : "text5", x:2,y:1,w:1,h:2 },
"6" : { image : "images/sec14.jpg", x:0,y:1,w:2,h:2,ox:.9,oy:.9 }
}
}
};
////////////////////////////////////////////////////////////////////////////
/* ==== init screen position and dimensions ==== */
function resize() {
/* --- resize --- */
nw = scr.offsetWidth;
nh = scr.offsetHeight;
wu = (nw - (6 * content.borderWidth)) / 5;
hu = (nh - (5 * content.borderWidth)) / 4;
}
////////////////////////////////////////////////////////////////////////////
/* ==== decode transition ==== */
var pushTrans = function (c0, c1, p) {
var i = p, t;
while( t = content.coord["C" + c0 + c1][i++] ) {
/* ---- init origin ---- */
if (t[2]) {
var d = ct[t[1]];
d.style.zIndex = 40 - i;
tweens.add(d, {
init: getPixels(t[0], t[1], t[2], 1)
});
} else {
var d = ct[(sc + 1) % 2][t[1]];
d.style.zIndex = 40 - i;
}
/* ---- target ---- */
tweens.add(d, {
duration: content.duration,
target : getPixels(t[0], t[1], t[3]),
onFinish : nextTrans,
params : [c0, c1 ,i, d, t[4], t[5]]
});
if (!t[4]) break;
}
}
/* ==== next tweens serie ==== */
var nextTrans = function (t) {
if (!t[4]) pushTrans(t[0], t[1], t[2]);
if (t[2] == content.coord["C" + t[0] + t[1]].length) moving = false;
}
/* ==== coordinates ==== */
var getPixels = function (c, n, div) {
var b = content.borderWidth;
/* ---- default size ---- */
if (c) {
var c = content["C" + c].divs;
if (!div) div = [c.x, c.y, c.w, c.h];
else if (div.length == 2) {
div[2] = c.w;
div[3] = c.h;
}
}
/* ---- return css ---- */
return {
left: div[0] * wu + (b + div[0] * b),
top: div[1] * hu + (b + div[1] * b),
width: Math.max(0, (div[2] * wu) + (-b + div[2] * b)),
height: Math.max(0, (div[3] * hu) +(-b + div[3] * b))
};
}
/* ==== start transitions ==== */
var compoIn = function (compo) {
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { compoIn(compo); }, 128);
return;
}
sto = false;
tre = false;
moving = true;
/* ---- display loader ---- */
dLoad = setTimeout(function () {
document.getElementById('loader').style.display = "block";
}, 150);
/* ---- swap containers ---- */
sc = (sc + 1) % 2;
var c = content["C" + compo];
/* ---- reset compo ---- */
c.nbi = c.nbl = 0;
for (var k in c.divs) {
ct.innerHTML = "";
for (var i in c.divs) if (i == "image") c.nbi++;
}
/* ---- for each containers ---- */
for (var k in c.divs) {
var d = c.divs;
for (var i in d) {
if (i == "image") {
/* ---- preload image ---- */
d.img = document.createElement('img');
d.img.compo = c;
d.img.c = compo;
d.img.d = d;
d.img.onload = function () {
this.compo.nbl++;
/* ---- all images loaded ---- */
if (this.compo.nbi == this.compo.nbl) {
clearTimeout(dLoad);
document.getElementById('loader').style.display = "none";
/* ---- for each container ---- */
for (var k in c.divs) {
var o = ct;
o.style.left = '-9999px';
var d = c.divs;
/* ---- for each attribute ---- */
for (var i in d) {
if (i == "goto") {
d.img.goto = d;
/* ---- onclick ---- */
d.img.onclick = function () { compoIn(this.goto); }
} else if (i == "image") {
/* ---- image loaded - update DOM ---- */
o.appendChild(d.img);
/* ---- center image ---- */
var x = d.xy(false);
tweens.add(d.img, {
init: { left: x[0], top: x[1] }
});
} else if (i == "text") {
/* ---- HTML text ---- */
if (document.getElementById(d))
o.innerHTML = document.getElementById(d).innerHTML;
}
}
}
/* ---- start transition ---- */
pushTrans(prevCompo, compo, 0);
prevCompo = compo;
}
};
/* ---- roll over ---- */
d.xy = function (s) {
return [
(!this.dx) ? (((this.w * wu + (this.w - 1) * content.borderWidth) - this.img.width) * (this.ox || .5)) : (s ? ((this.dx > 0) ? 0 : wu * this.dx) : ((this.dx > 0) ? -wu * this.dx : 0)),
(!this.dy) ? (((this.h * hu + (this.h - 1) * content.borderWidth) - this.img.height) * (this.oy || .5)) : (s ? ((this.dy > 0) ? 0 : hu * this.dy) : ((this.dy > 0) ? -hu * this.dy : 0))
];
}
if (k != "6"){
d.img.imgOver = function (x, y) {
tweens.kill(this.overTween);
this.overTween = tweens.add(this, {
duration: 300, target : {left : x, top: y}
});
};
d.img.onmousemove = function() {
if (!this.over && !moving) {
var x = this.d.xy(true);
this.imgOver(x[0], x[1]);
this.over = true;
}
};
d.img.onmouseout = function() {
if (this.over && !moving) {
var x = this.d.xy(false);
this.imgOver(x[0], x[1]);
this.over = false;
}
};
} else {
/* ---- zoom ---- */
d.img.onclick = function() { zoomIn(this); };
}
/* ---- source ---- */
d.img.src = imagesPath + d;
d.n = k;
}
}
}
}
/* ==== zoom in main image ==== */
var zoomIn = function (img) {
if (moving) return;
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { zoomIn(img); }, 128);
return;
}
sto = false;
ct[6].style.zIndex = 50;
img.onclick = function() { zoomOut(img); };
tweens.add(ct[6], {
duration: 1000,
target: {
left: content.borderWidth,
top: content.borderWidth,
width: nw - content.borderWidth * 2,
height: nh - content.borderWidth * 2
},
onFinish : function () {
tweens.add(['b1','b2'], {
duration: 1000, target: { height: 0 }
});
tweens.add(['b3','b4'], {
duration: 1000, target: { height: nh - 2, top: 1 }
});
}
});
tweens.add(img, {
duration: 1000,
target: {
left: ((nw - content.borderWidth * 2) - img.width) * .5,
top: ((nh - content.borderWidth * 2) - img.height) * .5
}
});
}
/* ==== zoom out main image ==== */
var zoomOut = function (img) {
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { zoomOut(img); }, 128);
return;
}
var d = img.d;
img.onclick = function() { zoomIn(img); };
sto = false;
tweens.add(['b3','b4'], {
duration: 1000,
target: { height: hu * 2 + content.borderWidth * 3 - 2, top: hu + content.borderWidth + 1 }
});
tweens.add(['b1','b2'], {
duration: 1000,
target: { height: hu + content.borderWidth },
onFinish : function () {
tweens.add(ct[6], {
duration: 1000, target: getPixels(img.c, "6", [d.x, d.y, d.w, d.h])
});
tweens.add(d.img, {
duration: 1000,
target: {
left: ((d.w * wu) - d.img.width) * (d.ox || .5),
top: ((d.h * hu) - d.img.height) * (d.oy || .5)
}
});
}
});
}
/* ==== intro ==== */
var intro = function() {
scr.style.visibility = "visible";
tweens.add('b1', { init: {
width: nw, height: 2 * hu + 2 * content.borderWidth, top: 0, left: 0 }
});
tweens.add('b2', { init: {
width: nw, height: 2 * hu + 2 * content.borderWidth, bottom: 0, left: 0 }
});
tweens.add('b3', { init: {
width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, left: 0 }
});
tweens.add('b4', { init: {
width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, right: 0 }
});
tweens.add(['b1','b2'], {
duration: 1000,
target: { height: hu + content.borderWidth }
});
tweens.add(['b3','b4'], {
duration: 1000,
target: { height: hu * 2 + content.borderWidth * 3 - 2, top:hu + content.borderWidth + 1 },
onFinish: compoIn,
params : 1
});
}
/* ==== init script ==== */
var init = function () {
scr = document.getElementById('screen');
for (var i = 0; i <= 1; i++) {
ct = [];
for (var j = 3; j < 7; j++) {
var o = ct = document.createElement('div');
o.className = "divs";
scr.appendChild(o);
}
}
resize();
setTimeout(function() {
intro();
}, 100);
}
return {
/* ==== public ==== */
init : init,
goto : function (compo) { compoIn(compo); }
}
}();
/* ==== start script ==== */
onload = function() {
res.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="b1"></div><div id="b2"><span>Promotora Bama <a href=
"mailto:[correo eliminado]">[correo eliminado]</a>
</a></span><span style="position:absolute;right:1em;">Desarrollo web KMA Productions</span>
<center><font size="4px">
Empresa
Animales
Noticias
Area clientes
Contacto</center></font>
</div>
<div id="b3"></div><div id="b4"></div>
</div>
[contenido no disponible]
<div class="html">
<div id="text1">
<div class="bkgh">
<div class="title">[contenido no disponible]<h1>Promotora Bama</h1></div>
<div class="text">Promotora Bama, empresa dedicada a la venta al mayor, importación, exportación de peces ornamentales de agua dulce y marina, reptiles, anfíbios así como a la cría de los mismos.</div>
</div>
</div>
<div id="text2">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Animales</h1></div>
<div class="text">Todos los animales siguen un exhaustivo control veterinario al llegar a nuestras instalaciones así como las cuarentenas necesarias. </div>
</div>
</div>
<div id="text3">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Instalaciones</h1></div>
<div class="text">La capacidad total es de mas de un millón y medio de peces, 30.000 reptiles, anfibios y artrópodos.</div>
</div>
</div>
<div id="text4">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Historia</h1></div>
<div class="text">Promotora Bama S.A. fue fundada en el año 1986 por un grupo de biólogos pioneros en la cría de peces marinos de alimentación, que construyeron una gran piscifactoría en el Delta del Ebro. En la actualidad Promotora Bama S.A. posee la instalación más grande de España con una superficie de más de 7000 m2 la cual se va ampliando y mejorando.</div>
</div>
</div>
<div id="text5">
<div class="bkgv">
<div class="title">[contenido no disponible]<h1>Contacto</h1></div>
<div class="text">
Teléfono 93 419 12 65 </p>
Fax 93 419 27 62</p>
Casanova 201</p>
08036 Barcelona</p>
[correo eliminado]</p>
<center><font color="#013B71">ENTRAR</font></center></div>
</div>
</div>
</div>
</body>
</html>
Agradezco vuestra ayuda
Saludos
Tengo un problema con una intro que estoy haciendo para una web.
El tema es que en explorer 7 e inferiores no se ven los marcos de color azul, para saber a que me refiero deberiais visualizar la intro en explorer 8 y vista de compatibilidad, entonces ahí se ve tal como la quiero. Os pongo el link a la intro y el codigo de la pagina
http://www.kma-productions.hostzi.com/promotora/inicio.html
codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Promotora Bama</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #ffffff;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
background: #fff;
left: 50%;
top: 50%;
margin-left: -512px;
margin-top: -384px;
width: 1024px;
height: 768px;
overflow: hidden;
visibility: hidden;
}
#b1 {
position: absolute;
background: #ffffff ;
z-index: 100;
outline: #60AAF6 solid 12px;
border-bottom: #2d2d2d solid 1px;
}
#b2 {
position: absolute;
background: #ffffff ;
z-index: 100;
outline: #60AAF6 solid 12px;
border-top: #2d2d2d solid 1px;
color: #898989;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
#b2 a {text-decoration: none;color:#4a4a4a;}
#b2 a:hover {text-decoration: none;color:#4a4a4a;}
#b2 a:visited {text-decoration: none;color:#4a4a4a;}
#b2 a:visited:hover {text-decoration: none;color:#4a4a4a;}
#b3 {
position: absolute;
background: #60AAF6 ;
z-index: 110;
border-left: #60AAF6 solid 1px;
}
#b4 {
position: absolute;
background: #60AAF6 ;
z-index: 110;
border-right: #60AAF6 solid 1px;
}
#screen .divs {
position: absolute;
left: -9999px;
background: #60AAF6;
overflow: hidden;
outline: #60AAF6 solid 12px;
}
#screen img {
position: absolute;
cursor: pointer;
filter: alpha(opacity=100);
z-index: 1;
}
.html {
visibility: hidden;
}
#screen h1 {
position: absolute;
font-weight: bold;
font-size: 1.3em;
color: #033079;
font-family: arial, helvetica, sans-serif;
margin-left: 40px;
margin-top: 18px;
z-index: 1;
}
#screen .title {
width: 100%;
height: 60px;
background: #CEF1FC url(fond_carre_titre.png) bottom no-repeat;
}
#screen .text {
margin: 10px;
font-size: 0.8em;
color: #9f9f9f;
font-family: arial, helvetica, sans-serif;
text-align: left;
margin-top: 10px;
}
#screen .bul {
position: absolute;
left: -12px;
z-index: 0;
}
#screen .bkgh {
width: 100%;
height: 100%;
background: #fff url(images/fondoinicio.jpg) bottom no-repeat;
}
#screen .bkgc {
width: 100%;
height: 100%;
background: #fff url(images/fondoinicio.jpg) bottom no-repeat;
}
#screen .bkgv {
width: 100%;
height: 100%;
background: #fff url(fond_vertical.png) bottom no-repeat;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
outline:#000 solid 5px;
z-index: 2000;
display: none;
}
</style>
<script type="text/javascript" src="tweens.js"></script>
<script type="text/javascript">
// =============================================================
// script by Gerard Ferrandez | October 18, 2009
// Design by Gabriel Uribe | http://www.gabrieluribe.com/
// ----------------------------------------------------------
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
// work licensed under CC-BY-NC - Do not remove this notice
// =============================================================
var res = function () {
/* ---- private vars ---- */
var imagesPath = "",
scr, dLoad, tre, sto, moving,
compo, prevCompo = "0",
nw = 0,
nh = 0,
wu = 0,
hu = 0,
sc = 0,
ct = [];
/* ---- Compositions ---- */
var content = {
borderWidth : 12,
duration : 600,
coord : {
C01:[[1,3,[-1,1],,0],[1,4,[1,0],,0],[1,6,[5,1],,0],[1,5,[0,3],,1]],
C12:[[1,5,,[0,3],0],[1,3,,[-1,1],1],[1,4,,[0,1],1],[1,6,,[1,1],0],[1,4,,[0,3],1],[2,3,[0,-1],,0],[1,6,,[1,-1],1],[2,6,[1,3],,0],[2,5,[5,1],,0],[2,4,[5,2],,1]],
C13:[[1,3,,[0,0],1],[1,4,,[1,0],1],[1,5,,[0,3],0],[1,6,,[0,1],0],[3,3,[5,1],,0],[3,5,[4,0],,1],[3,4,[4,3],,0],[1,6,,[-3,1],1],[3,6,[3,1,0,2],,1]],
C23:[[2,5,,[4,-1],1],[2,4,,[4,3],0],[3,3,[5,1],[4,1],0],[2,6,,[1,3],1],[3,6,[1,-1],[1,1],0],[2,3,,[-1,1],1],[3,6,[1,1],[0,1],1],[3,3,[4,1],[3,1],0],[3,5,[4,0],,0],[3,4,[4,3],,0]],
C24:[[2,3,,[0,3],0],[2,6,,[2,1,2,2],0],[4,5,[-2,1],,0],[4,3,[-2,2],,0],[2,6,,[2,3,2,2],1],[4,6,[2,-1],,0],[2,5,,[3,1],1],[2,4,,[3,2],1],[4,4,[5,1],,1]],
C34:[[3,3,,[3,-1],0],[3,6,,[2,1,2,2],0],[4,3,[0,3],,1],[4,5,[0,0],,0],[3,5,,[5,1],0],[3,4,,[5,2],0],[3,6,,[5,1],0],[4,6,[2,3],,0],[4,4,[5,1],,1]],
C35:[[3,3,,[2,1],0],[3,5,,[3,1],0],[3,4,,[3,2],0],[3,6,,[0,-1],1],[5,4,[4,-1],,0],[5,6,[-2,1],,0],[3,5,,[3,0],1],[3,4,,[3,3],0],[3,3,,[3,1],0],[3,3,,[3,-1],1],[5,3,[3,3],,1],[5,5,[2,-1],,1]],
C41:[[4,4,,[5,1],0],[4,5,,[0,0],1],[4,3,,[0,3],0],[4,6,,[0,1],0],[1,6,[5,1],[2,1],0],[4,6,,[0,3],0],[1,5,[-2,2],[0,2],0],[1,4,[1,0],[1,1],0],[1,3,[0,0],[0,1],0]],
C42:[[4,5,,[-1,1],1],[4,3,,[-1,2],1],[4,6,,[1,1,3,2],0],[4,5,,[-1,0],1],[4,3,,[-1,3],0],[2,3,[-1,1],,0],[4,4,,[4,3],1],[2,5,[4,-1],,1],[4,6,,[1,-1,3,2],1],[2,6,[1,3],,1]],
C45:[[4,5,,[0,-1],1],[4,3,,[0,3],0],[5,6,[-2,1],,0],[4,6,,[2,1],1],[5,4,[5,1],,1],[4,6,,[2,1,1,2],1],[4,4,,[3,1],0],[4,6,,[2,-1,1,2],1],[5,5,[2,3],,0],[5,3,[3,1],,1],[4,4,,[3,-1],1]],
C51:[[5,4,,[4,3],0],[5,3,,[3,3],0],[5,5,,[2,3],0],[1,6,[5,1],,0],[1,3,[0,3],,1],[1,4,[1,3],,1],[5,6,,[0,-1],0],[1,5,[-2,2],,1]],
C52:[[5,4,,[5,1],0],[5,3,,[5,1],0],[5,5,,[0,1],1],[5,6,,[-2,1],0],[5,5,,[0,-1],1],[2,3,[0,3],,0],[2,6,[5,1],,0],[2,5,[5,1],,0],[2,4,[5,2],,0]]
},
C1 : {
divs : {
"3" : { image: "images/logo.jpg", goto:2, x:0,y:1,w:1,h:1,dx:0,dy:-.5 },
"4" : { image: "images/sec2.jpg", goto:3, x:1,y:1,w:1,h:1,dx:.5,dy:0 },
"5" : { text: "text1", x:0,y:2,w:2,h:1 },
"6" : { image: "images/sec3.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 }
}
},
C2 : {
divs : {
"3" : { image: "images/sec4.jpg", goto:4, x:0,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec5.jpg", goto:3, x:4,y:2,w:1,h:1,dx:0,dy:.5 },
"5" : { text : "text2", x:4,y:1,w:1,h:1 },
"6" : { image : "images/sec7.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 }
}
},
C3 : {
divs : {
"3" : { image: "images/sec9.jpg", goto:4, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec10.jpg", goto:5, x:4,y:2,w:1,h:1,dx:0,dy:-.5 },
"5" : { text : "text3", x:4,y:1,w:1,h:1 },
"6" : { image : "images/sec8.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 }
}
},
C4 : {
divs : {
"3" : { image: "images/sec12.jpg", goto:5, x:0,y:2,w:2,h:1,dx:0,dy:.5 },
"4" : { image: "images/sec13.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
"5" : { text : "text4", x:0,y:1,w:2,h:1 },
"6" : { image : "images/sec11.jpg", x:2,y:1,w:2,h:2,ox:.2,oy:.5 }
}
},
C5 : {
divs : {
"3" : { image: "images/sec15.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 },
"4" : { image: "images/sec16.jpg", goto:2, x:4,y:1,w:1,h:2,dx:-.5,dy:0 },
"5" : { text : "text5", x:2,y:1,w:1,h:2 },
"6" : { image : "images/sec14.jpg", x:0,y:1,w:2,h:2,ox:.9,oy:.9 }
}
}
};
////////////////////////////////////////////////////////////////////////////
/* ==== init screen position and dimensions ==== */
function resize() {
/* --- resize --- */
nw = scr.offsetWidth;
nh = scr.offsetHeight;
wu = (nw - (6 * content.borderWidth)) / 5;
hu = (nh - (5 * content.borderWidth)) / 4;
}
////////////////////////////////////////////////////////////////////////////
/* ==== decode transition ==== */
var pushTrans = function (c0, c1, p) {
var i = p, t;
while( t = content.coord["C" + c0 + c1][i++] ) {
/* ---- init origin ---- */
if (t[2]) {
var d = ct[t[1]];
d.style.zIndex = 40 - i;
tweens.add(d, {
init: getPixels(t[0], t[1], t[2], 1)
});
} else {
var d = ct[(sc + 1) % 2][t[1]];
d.style.zIndex = 40 - i;
}
/* ---- target ---- */
tweens.add(d, {
duration: content.duration,
target : getPixels(t[0], t[1], t[3]),
onFinish : nextTrans,
params : [c0, c1 ,i, d, t[4], t[5]]
});
if (!t[4]) break;
}
}
/* ==== next tweens serie ==== */
var nextTrans = function (t) {
if (!t[4]) pushTrans(t[0], t[1], t[2]);
if (t[2] == content.coord["C" + t[0] + t[1]].length) moving = false;
}
/* ==== coordinates ==== */
var getPixels = function (c, n, div) {
var b = content.borderWidth;
/* ---- default size ---- */
if (c) {
var c = content["C" + c].divs;
if (!div) div = [c.x, c.y, c.w, c.h];
else if (div.length == 2) {
div[2] = c.w;
div[3] = c.h;
}
}
/* ---- return css ---- */
return {
left: div[0] * wu + (b + div[0] * b),
top: div[1] * hu + (b + div[1] * b),
width: Math.max(0, (div[2] * wu) + (-b + div[2] * b)),
height: Math.max(0, (div[3] * hu) +(-b + div[3] * b))
};
}
/* ==== start transitions ==== */
var compoIn = function (compo) {
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { compoIn(compo); }, 128);
return;
}
sto = false;
tre = false;
moving = true;
/* ---- display loader ---- */
dLoad = setTimeout(function () {
document.getElementById('loader').style.display = "block";
}, 150);
/* ---- swap containers ---- */
sc = (sc + 1) % 2;
var c = content["C" + compo];
/* ---- reset compo ---- */
c.nbi = c.nbl = 0;
for (var k in c.divs) {
ct.innerHTML = "";
for (var i in c.divs) if (i == "image") c.nbi++;
}
/* ---- for each containers ---- */
for (var k in c.divs) {
var d = c.divs;
for (var i in d) {
if (i == "image") {
/* ---- preload image ---- */
d.img = document.createElement('img');
d.img.compo = c;
d.img.c = compo;
d.img.d = d;
d.img.onload = function () {
this.compo.nbl++;
/* ---- all images loaded ---- */
if (this.compo.nbi == this.compo.nbl) {
clearTimeout(dLoad);
document.getElementById('loader').style.display = "none";
/* ---- for each container ---- */
for (var k in c.divs) {
var o = ct;
o.style.left = '-9999px';
var d = c.divs;
/* ---- for each attribute ---- */
for (var i in d) {
if (i == "goto") {
d.img.goto = d;
/* ---- onclick ---- */
d.img.onclick = function () { compoIn(this.goto); }
} else if (i == "image") {
/* ---- image loaded - update DOM ---- */
o.appendChild(d.img);
/* ---- center image ---- */
var x = d.xy(false);
tweens.add(d.img, {
init: { left: x[0], top: x[1] }
});
} else if (i == "text") {
/* ---- HTML text ---- */
if (document.getElementById(d))
o.innerHTML = document.getElementById(d).innerHTML;
}
}
}
/* ---- start transition ---- */
pushTrans(prevCompo, compo, 0);
prevCompo = compo;
}
};
/* ---- roll over ---- */
d.xy = function (s) {
return [
(!this.dx) ? (((this.w * wu + (this.w - 1) * content.borderWidth) - this.img.width) * (this.ox || .5)) : (s ? ((this.dx > 0) ? 0 : wu * this.dx) : ((this.dx > 0) ? -wu * this.dx : 0)),
(!this.dy) ? (((this.h * hu + (this.h - 1) * content.borderWidth) - this.img.height) * (this.oy || .5)) : (s ? ((this.dy > 0) ? 0 : hu * this.dy) : ((this.dy > 0) ? -hu * this.dy : 0))
];
}
if (k != "6"){
d.img.imgOver = function (x, y) {
tweens.kill(this.overTween);
this.overTween = tweens.add(this, {
duration: 300, target : {left : x, top: y}
});
};
d.img.onmousemove = function() {
if (!this.over && !moving) {
var x = this.d.xy(true);
this.imgOver(x[0], x[1]);
this.over = true;
}
};
d.img.onmouseout = function() {
if (this.over && !moving) {
var x = this.d.xy(false);
this.imgOver(x[0], x[1]);
this.over = false;
}
};
} else {
/* ---- zoom ---- */
d.img.onclick = function() { zoomIn(this); };
}
/* ---- source ---- */
d.img.src = imagesPath + d;
d.n = k;
}
}
}
}
/* ==== zoom in main image ==== */
var zoomIn = function (img) {
if (moving) return;
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { zoomIn(img); }, 128);
return;
}
sto = false;
ct[6].style.zIndex = 50;
img.onclick = function() { zoomOut(img); };
tweens.add(ct[6], {
duration: 1000,
target: {
left: content.borderWidth,
top: content.borderWidth,
width: nw - content.borderWidth * 2,
height: nh - content.borderWidth * 2
},
onFinish : function () {
tweens.add(['b1','b2'], {
duration: 1000, target: { height: 0 }
});
tweens.add(['b3','b4'], {
duration: 1000, target: { height: nh - 2, top: 1 }
});
}
});
tweens.add(img, {
duration: 1000,
target: {
left: ((nw - content.borderWidth * 2) - img.width) * .5,
top: ((nh - content.borderWidth * 2) - img.height) * .5
}
});
}
/* ==== zoom out main image ==== */
var zoomOut = function (img) {
if (tweens.running) {
if (sto) clearTimeout(sto);
sto = setTimeout(function() { zoomOut(img); }, 128);
return;
}
var d = img.d;
img.onclick = function() { zoomIn(img); };
sto = false;
tweens.add(['b3','b4'], {
duration: 1000,
target: { height: hu * 2 + content.borderWidth * 3 - 2, top: hu + content.borderWidth + 1 }
});
tweens.add(['b1','b2'], {
duration: 1000,
target: { height: hu + content.borderWidth },
onFinish : function () {
tweens.add(ct[6], {
duration: 1000, target: getPixels(img.c, "6", [d.x, d.y, d.w, d.h])
});
tweens.add(d.img, {
duration: 1000,
target: {
left: ((d.w * wu) - d.img.width) * (d.ox || .5),
top: ((d.h * hu) - d.img.height) * (d.oy || .5)
}
});
}
});
}
/* ==== intro ==== */
var intro = function() {
scr.style.visibility = "visible";
tweens.add('b1', { init: {
width: nw, height: 2 * hu + 2 * content.borderWidth, top: 0, left: 0 }
});
tweens.add('b2', { init: {
width: nw, height: 2 * hu + 2 * content.borderWidth, bottom: 0, left: 0 }
});
tweens.add('b3', { init: {
width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, left: 0 }
});
tweens.add('b4', { init: {
width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, right: 0 }
});
tweens.add(['b1','b2'], {
duration: 1000,
target: { height: hu + content.borderWidth }
});
tweens.add(['b3','b4'], {
duration: 1000,
target: { height: hu * 2 + content.borderWidth * 3 - 2, top:hu + content.borderWidth + 1 },
onFinish: compoIn,
params : 1
});
}
/* ==== init script ==== */
var init = function () {
scr = document.getElementById('screen');
for (var i = 0; i <= 1; i++) {
ct = [];
for (var j = 3; j < 7; j++) {
var o = ct = document.createElement('div');
o.className = "divs";
scr.appendChild(o);
}
}
resize();
setTimeout(function() {
intro();
}, 100);
}
return {
/* ==== public ==== */
init : init,
goto : function (compo) { compoIn(compo); }
}
}();
/* ==== start script ==== */
onload = function() {
res.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="b1"></div><div id="b2"><span>Promotora Bama <a href=
"mailto:[correo eliminado]">[correo eliminado]</a>
</a></span><span style="position:absolute;right:1em;">Desarrollo web KMA Productions</span>
<center><font size="4px">
Empresa
Animales
Noticias
Area clientes
Contacto</center></font>
</div>
<div id="b3"></div><div id="b4"></div>
</div>
[contenido no disponible]
<div class="html">
<div id="text1">
<div class="bkgh">
<div class="title">[contenido no disponible]<h1>Promotora Bama</h1></div>
<div class="text">Promotora Bama, empresa dedicada a la venta al mayor, importación, exportación de peces ornamentales de agua dulce y marina, reptiles, anfíbios así como a la cría de los mismos.</div>
</div>
</div>
<div id="text2">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Animales</h1></div>
<div class="text">Todos los animales siguen un exhaustivo control veterinario al llegar a nuestras instalaciones así como las cuarentenas necesarias. </div>
</div>
</div>
<div id="text3">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Instalaciones</h1></div>
<div class="text">La capacidad total es de mas de un millón y medio de peces, 30.000 reptiles, anfibios y artrópodos.</div>
</div>
</div>
<div id="text4">
<div class="bkgc">
<div class="title">[contenido no disponible]<h1>Historia</h1></div>
<div class="text">Promotora Bama S.A. fue fundada en el año 1986 por un grupo de biólogos pioneros en la cría de peces marinos de alimentación, que construyeron una gran piscifactoría en el Delta del Ebro. En la actualidad Promotora Bama S.A. posee la instalación más grande de España con una superficie de más de 7000 m2 la cual se va ampliando y mejorando.</div>
</div>
</div>
<div id="text5">
<div class="bkgv">
<div class="title">[contenido no disponible]<h1>Contacto</h1></div>
<div class="text">
Teléfono 93 419 12 65 </p>
Fax 93 419 27 62</p>
Casanova 201</p>
08036 Barcelona</p>
[correo eliminado]</p>
<center><font color="#013B71">ENTRAR</font></center></div>
</div>
</div>
</div>
</body>
</html>
Agradezco vuestra ayuda
Saludos