Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, to com dois problemas em meu código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">My](http://www.w3.org/1999/xhtml) Design</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"> @import url("css/index.css");</style><script type="text/javascript"> Function.prototype.bind = function() { var args = []; for(var i = 0; i < arguments.length; i++) args[i] = arguments[i]; var method = this; var context = args.shift(); return function() { var a = []; for(var i = 0; i < arguments.length; i++) a[i] = arguments[i]; return method.apply(context, args.concat(a)); };};var images = ["img/trab.jpg", "img/trab.jpg", "img/trab.jpg", "img/trab.jpg", "img/trab.jpg"];for(var i = 0; i < images.length; i++) { var img = new Image(); img.onload = function(x) { document.getElementById("img" + x).src = images[x]; }.bind(this, i); img.src = images[i];}function teste() {for (i=0; i<=4; i++) {var ids = "img" + i;var id = document.getElementById(ids);var largura = id.width / 2; var altura = id.height / 2; id.style.marginLeft = "-" + largura; id.style.marginTop = "-" + altura; }}</script></head><body onload="teste()"><div id="global"> <div id="header"></div> <div id="bodyi"> <div id="body"> <div id="menu"> <ul> <li class="tit_menu_laterais">:: Portfólio</li> <li><a href="javascript:" onClick="teste()" title="Ilustrações">› Ilustrações</a></li> <li><a href="#" title="Material Gráfico">› Material Gráfico</a></li> <li><a href="#" title="Web Design">› Web design</a></li> <li><a href="#" title="Diagramação">› Diagramação</a></li> </ul> <h2 class="cab_menu"> :: Referências </h2> <ol> <li><a href="#" title="www.maujor.com.br">Maujor</a></li> <li><a href="#" title="www.imasters.com.br">Imasters</a></li> <li><a href="#" title="www.tablelles.com.br">Tablelles</a></li> <li><a href="#" title="www.revolucao.etc.br">Revolução etc</a></li> </ol> <ul> <li class="tit_menu_laterais">:: Inspirações</li> <li><a href="#" title="Materiais" class="laranja">› Materiais</a></li> <li><a href="#" title="Web Sites" class="azul">› Web Sites</a></li> <li><a href="#" title="Trabalhos" class="vermelho">› Trabalhos</a></li> </ul> </div> <div id="corpo"> <h1 class="tit_materias">Últimos Projetos</h1> <p class="text_materias"> De uma olhada na seleção de alguns projetos que elaborei neste último mês: </p> <div id="trabalhos"> <div id="trab1"><img src="img/carregando.gif" id="img0" class="trab_centraliza" alt="loading" /></div> <div id="trab2"><img src="img/carregando.gif" id="img1" class="trab_centraliza" alt="loading" /></div> <div id="trab3"><img src="img/carregando.gif" id="img2" class="trab_centraliza" alt="loading" /></div> <div id="trab4"><img src="img/carregando.gif" id="img3" class="trab_centraliza" alt="loading" /></div> <div id="trab5"><img src="img/carregando.gif" id="img4" class="trab_centraliza" alt="loading" /></div> </div> </div> </div> </div> <div id="animais"></div> </div></body></html>O primeiro e creio que seja mais complicado esta nas seguintes linhas:
id.style.marginLeft = "-" + largura; id.style.marginTop = "-" + altura;
Ja tentei fazer margin-top; margintop; etc ... , mas nada funciona no Fire Fox, no IE e no Opera centraliza corretamente...
Bem o segundo problema é que estou chamando a função teste() pelo body onload, mas depois do carregamento da imagem demora 1 segundo para que ela centralize dando uma visibilidade ruim no carregamento. Gostaria de saber se vocês tem alguma sugestão de melhora?
O site é este: www.ilhasolteira.net/teste
Carregando comentários...