Problema Compatibilidade

1. Problema Compatibilidade

Spyker
(usa Ubuntu)

Enviado em 17/03/2013 - 09:05h

O meu problema tem haver com a mudança de gif's.
Eles no Firefox rodam bem e trocam como deve ser, mas no Chrome já dá bug..

O link para testarem ambos os navegadores
http://narutogameonline.netau.net/Teste/hist_3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
#img1{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
}
.inverter{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
}
</style>

<script type="application/javascript">
function teste(){
img = [];
for (i=0;i<=4;i++){
img[i] = new Image()
img[i].src = "img"+i+".gif";
}
img[i+1] = new Image();
img[i+1].src = "../personagens/img_cSasuke.gif";

kakashi = document.createElement('img')
kakashi.src = img[3].src; kakashi.style.position = 'absolute'; kakashi.style.top = '160px'; kakashi.style.left = '65px'; kakashi.style.zIndex = '2'; kakashi.id = 'kakashi';
document.getElementById('cont').appendChild(kakashi);

haku = document.createElement('img')
haku.src = img[2].src; haku.style.position = 'absolute'; haku.style.top = '180px'; haku.style.left = '320px'; haku.style.zIndex = '1'; haku.className = 'inverter';
document.getElementById('cont').appendChild(haku);

document.getElementById('img').src = img[i+1].src;
document.getElementById('img1').src = img[0].src;

//Falas

texto = [];
texto[0] = "Eu: Te odeio por fazer mal ao Sasuke.";
texto[1] = "Haku: Vamos ver o que você tem...";

ataque_kak_completo =
function(){
kak_andar = 65;
document.getElementById('kakashi').src = img[4].src;
setTimeout(function(){
ataque_kakashi = setInterval(function(){
kakashi.style.left = kak_andar+'px';

if (kak_andar===225){
setTimeout(function(){kakashi.src = img[3].src; },200);
clearInterval(ataque_kakashi);
}
else{
kak_andar++;
if(kak_andar===170){
haku.style.top = '160px';
haku.style.left = '285px';
}
}
},1)
},2000);
};

letras_aparecerem(texto,ataque_kak_completo);
}
function letras_aparecerem(fala,ataque){

n_char = [];
tamanho = fala.length;

for(i=0; i<tamanho; i++){
n_char[i] = fala[i].length;
}

i=1;
n=0;

mensagem = document.getElementById('msg');

acao = setInterval(function(){
if(i<=n_char[n]){
frase = fala[n].substr(0,i);
mensagem.innerHTML = frase;
i++;
}
else
if(n<2){
i=1;
n++;
}
else{
mensagem.innerHTML = '';
clearInterval(acao);
ataque();
}
},100);
}
</script>

<body onload="teste()" style="background-color:#CCC">
<div id="cont" style="width:512px; height:317px; background-image:url(../hist_3/img1.gif)">
<img id="img" class="imagem" style="position:absolute; top:180px; left:70px; z-index:1000" src="" />
<img id="img1" class="imagem" style="position:absolute; top:160px; left:350px; z-index:1001" src="" />
</div>
<span id="msg" style="background-color:#000; color:#FFF; display:inline-block; padding:2px; width:508px; height:50px;"></span>
</body>
</html>

Me digam se existe solução...

0 0

Quote