18/06/2008, 04:02
|
| | | Fecha de Ingreso: junio-2008
Mensajes: 12
Antigüedad: 16 años, 7 meses Puntos: 0 | |
| JavaScript Vs Firefox
Buenos dias a todos.
En primer lugar, gracias por el tiempo.
Vamos a ello.
Estoy creando una web que tiene una imagen de fondo que cambia cada x tiempo con un barrido. Esta función de JS me funciona bien en Opera, Safari, IE...pero en Firefox no hay manera.
Con la consola detecté un error de getelementbytagname que ya está solucionado. Ahora el FF no me da error, pero sigue sin verse nada de nada.
Les dejo los códigos aquí abajo por si pueden echarme un cable.
El JS.
Código:
// IXF1.0 :: Image cross-fade
// *****************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
//******************************************************
//global object
var ixw = { 'clock' : null, 'count' : 1 }
var tiempo;
var imagenes = new Array("imagenes/imagen1.jpg","imagenes/imagen2.jpg","imagenes/imagen3.jpg", "imagenes/imagen4.jpg","imagenes/imagen5.jpg","imagenes/imagen6.jpg", "imagenes/imagen7.jpg","imagenes/imagen8.jpg","imagenes/imagen9.jpg","imagenes/imagen10.jpg");
/*******************************************************
/*****************************************************************************
List the images that need to be cached
*****************************************************************************/
ixw.imgs = [
'imagenes/imagen1.jpg',
'imagenes/imagen2.jpg',
'imagenes/imagen3.jpg',
'imagenes/imagen4.jpg',
'imagenes/imagen5.jpg',
'imagenes/imagen6.jpg',
'imagenes/imagen7.jpg',
'imagenes/imagen8.jpg',
'imagenes/imagen9.jpg',
'imagenes/imagen10.jpg',
];
/*****************************************************************************
*****************************************************************************/
//cache the images
ixw.imgsLen = ixw.imgs.length;
ixw.cache = [];
for(var i=0; i<ixw.imgsLen; i++)
{
ixw.cache[i] = new Image;
ixw.cache[i].src = ixw.imgs[i];
}
function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}
//crosswipe setup function
function crosswipe()
{
//if the timer is not already going
if(ixw.clock == null)
{
//copy the image object
ixw.obj = arguments[0];
//get its dimensions
ixw.size = { 'w' : ixw.obj.width, 'h' : ixw.obj.height };
//copy the image src argument
var n=aleatorio(0,9);
//alert (n);
ixw.src = imagenes[n];
//change the image alt text if defined
if(typeof arguments[3] != 'undefined' && arguments[3] != '')
{
ixw.obj.alt = arguments[3];
}
//if dynamic element creation is supported
if(typeof document.createElementNS != 'undefined' || typeof document.createElement != 'undefined')
{
//create a new image object and append it to body
//detecting support for namespaced element creation, in case we're in the XML DOM
ixw.newimg = document.getElementsByTagName('span')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));
//set positioning classname
ixw.newimg.className = 'idupe';
//set src to new image src
ixw.newimg.src = ixw.src
//move it to superimpose original image
ixw.newimg.style.left = ixw.getRealPosition(ixw.obj, 'x') + 'px';
ixw.newimg.style.top = ixw.getRealPosition(ixw.obj, 'y') + 'px';
//set it to be completely hidden with clip
ixw.newimg.style.clip = 'rect(0, 0, 0, 0)';
//show the image
ixw.newimg.style.visibility = 'visible';
//copy and convert fade duration argument
ixw.length = parseInt(arguments[1], 10) * 1000;
//create fade resolution argument as 20 steps per transition
ixw.resolution = parseInt(arguments[1], 10) * 20;
//copy slide direction argument
ixw.dir = arguments[2];
//start the timer
ixw.clock = setInterval('ixw.crosswipe()', ixw.length/ixw.resolution);
}
//otherwise if dynamic element creation is not supported
else
{
//just do the image swap
ixw.obj.src = ixw.src;
}
}
};
//crosswipe timer function
ixw.crosswipe = function()
{
//decrease the counter on a linear scale
ixw.count -= (1 / ixw.resolution);
//if the counter has reached the bottom
if(ixw.count < (1 / ixw.resolution))
{
//clear the timer
clearInterval(ixw.clock);
ixw.clock = null;
//reset the counter
ixw.count = 1;
//set the original image to the src of the new image
ixw.obj.src = ixw.src;
}
//animate the clip of the new image
//using the width and height properties we saved earlier
ixw.newimg.style.clip = 'rect('
+ ( (/bt|bltr|brtl/.test(ixw.dir)) ? (ixw.size.h * ixw.count) : (/che|cc/.test(ixw.dir)) ? ((ixw.size.h * ixw.count) / 1) : (0) )
+ 'px, '
+ ( (/lr|tlbr|bltr/.test(ixw.dir)) ? (ixw.size.w - (ixw.size.w * ixw.count)) : (/cve|cc/.test(ixw.dir)) ? (ixw.size.w - ((ixw.size.w * ixw.count) / 1)) : (ixw.size.w) )
+ 'px, '
+ ( (/tb|tlbr|trbl/.test(ixw.dir)) ? (ixw.size.h - (ixw.size.h * ixw.count)) : (/che|cc/.test(ixw.dir)) ? (ixw.size.h - ((ixw.size.h * ixw.count) / 1)) : (ixw.size.h) )
+ 'px, '
+ ( (/lr|tlbr|bltr/.test(ixw.dir)) ? (0) : (/tb|bt|che/.test(ixw.dir)) ? (0) : (/cve|cc/.test(ixw.dir)) ? ((ixw.size.w * ixw.count) / 1) : (ixw.size.w * ixw.count) )
+ 'px)';
//keep new image in position with original image
//in case text size changes mid transition or something
ixw.newimg.style.left = ixw.getRealPosition(ixw.obj, 'x') + 'px';
ixw.newimg.style.top = ixw.getRealPosition(ixw.obj, 'y') + 'px';
//if the counter is at the top, which is just after the timer has finished
if(ixw.count == 1)
{
//remove the duplicate image
ixw.newimg.parentNode.removeChild(ixw.newimg);
}
};
//get real position method
ixw.getRealPosition = function()
{
this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft : arguments[0].offsetTop;
this.tmp = arguments[0].offsetParent;
while(this.tmp != null)
{
this.pos += (arguments[1] == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop;
this.tmp = this.tmp.offsetParent;
}
return this.pos;
};
El HTML Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="crosswipe.js"></script>
<link href="transforma.css" rel="stylesheet" type="text/css" />
<title>Transforma.cat</title>
<!--[if lt IE 7]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="frontal">Carrer Carders 17, 1er 2a<br />08003 Barcelona<br />T +34 932 690 428<br />E <a href="mailto:[email protected]">[email protected]</a></div>
<div id="contenido">Página en construcción <br /> Website under construction</div>
<div id=fondo><span><img id="test" src="imagenes/imagen1.jpg" /></span>
<script> setInterval("crosswipe(document.getElementById('test'),'2', 'tb')",10000); </script>
</div>
</body>
</html> Y, por útlimo, el CSS Código HTML: body{
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999;
font-size:11px;
overflow:hidden;
margin:0px;
padding:0px;
line-height:13px;
}
/* default opacity for IE */
img {
filter:alpha(opacity=100);
}
/* duplicate image positioning */
img.idupe {
position:absolute;
z-index:30000;
visibility:hidden;
}
A:link, A:visited { text-decoration: none; color:#000000 }
A:hover { text-decoration: underline; color:#000000 }
#fondo{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 100%;
overflow:hidden;
}
#frontal{
padding-top:8px;
padding-left:8px;
position:absolute;
height:224px;
width:352px;
left:16px;
top:16px;
background-image:url(imagenes/pantalla-trans.png);
/*Esta ñapa es para que el png funcione en IE, viva esa panda de ***** */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='imagenes/pantalla-trans.png', sizingMethod='fit');
z-index:0;
}
#contenido{
padding-top:8px;
padding-left:8px;
position:absolute;
height:224px;
width:352px;
left:392px;
top:16px;
z-index:0;
background-color:#FFFFFF;
}
.imagen{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#portada{
position:absolute;
left:16px;
top:16px;
}
Gracias de nuevo. |