Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paulo Freitas Nobrega

Erro no FF em capturar largura da imagem

Por , em Javascript

Recommended Posts

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

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"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>My 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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

Graças a deus consegui fazer, deu trabalho, mais achei um geito:

To postando aqui se alguém quiser usar:

 

primeiro criei um class separada:

.centraliza {position: relative;top: 50%;left: 50%;margin-top: -51px;margin-left: -51px; }

depois acionei uma linha no código,

era:

img.onload = function(x) {    document.getElementById("img" + x).src = images[x];    }

ficou:

img.onload = function(x) {    document.getElementById("img" + x).src = images[x];  document.getElementById("img" + x).className = "centraliza";    }

Deu certo no Opera, firefox e IE

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito