Ir para conteúdo

POWERED BY:

Arquivado

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

juliano.ma

Aumentar o tamanho da foto ao clikar sobre ela

Por , em Javascript

Recommended Posts

juliano.ma    0

juliano.ma
Postado

Olá à todos,tenho uma pagina que possui algumas linhas e colunas com fotos. As fotos não são tumb, apenas estão sendo apresentadas em um tamanho pequeno.Preciso que quando clikar na foto a mesma aumente sobre toda a página (não é popup) e ao clikar novamente retorne ao seu tamanho inicial.Dá uma força ai gente!Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

juliano.ma    0

juliano.ma
Postado

Obrigados à todos!

 

Resolvi meu problema usando o seguinte script:

 

 

<html><head><title>AMPLIAR FOTO</title><!--fotoZoom é a div em que a imagem irá abrir!bgFotoZoom é como se fosse uma background que fica em tela inteira com cor transparente definido de 0 a 1, ou 0 a 100--><style>#fotoZoom {width:0; height:0; background-color:white;display: none; visibility: visible; position: absolute;text-align:center;top:0px; left:15%;}#bgFotoZoom {background-color: black; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); display: none;width:100%; height:100%; top:0px; left:0px; visibility:visible; position:absolute;}img {border:0px;}</style><!--Esta função mostra a div oculta>>--><script language="JavaScript" type="text/javascript">function amplia(){document.getElementById('fotoZoom').style.display='block';document.getElementById('bgFotoZoom').style.display='block';}</script><!--Esta função mostra as informações que estarão dentro da div>>obs.: o script a seguir dentro de innerHTML="" é onde mostrará o conteúdo dentro da div,deve ser escrito na mesma linha sem quebra de linha entre os dados html dentro deste script--><script language="JavaScript">function abre(img,legenda,credito,largura,altura) {document.getElementById("fotoZoom").innerHTML="<center><table bgcolor='white' cellspadding='1' cellspacing='1'><tr><td align=center><font size=2 face=Verdana>"+legenda+"</td></tr><tr><td><a href='java script:fecha();'><img alt='"+legenda+"' src='"+img+"' width='"+largura+"' height='"+altura+"'></a></td></tr><tr><td align=right><font size=2 face=Verdana>"+credito+" </font></td></tr></table>";}</script><!--Esta executa o script fecha, para fechar a div que foi aberta anteriormente--><script language="JavaScript" type="text/javascript">function fecha() {document.getElementById('fotoZoom').style.display='none';document.getElementById('bgFotoZoom').style.display='none';}</script></head><div id='bgFotoZoom'></div><center><div id='fotoZoom'></div></center><body><center><table style="width: 200px; text-align: center;" border="0"cellpadding="1" cellspacing="1" bgcolor="white"><tbody><tr><td><a href="java script: amplia();" onclick="abre('http://imagestore.saiswa.com/saiyine/sa-super-saiyan-raditz.jpg','RADITIZ','IMAGES GOOGLE','800','600')"><img src="http://tbn0.google.com/images?q=tbn:m-xrANINThpv-M:http://imagestore.saiswa.com/saiyine/sa-super-saiyan-raditz.jpg"></a></td><td><a href="java script: amplia();" onclick="abre('http://www.sequenz.ch/files/_galleries/gallery/screenshots/php5-on-mac.png','PHP5','PHP ©','700','500')"><img src="http://tbn0.google.com/images?q=tbn:Wt8sW9nCyatl7M:http://www.sequenz.ch/files/_galleries/gallery/screenshots/php5-on-mac.png"></a></td><td><a href="java script: amplia();" onclick="abre('http://www.programujte.com/galerie/200609212117_databaze-php5.png','DATA BAZE','GOOGLE','600','400')"><img src="http://tbn0.google.com/images?q=tbn:QYS78X1RJrGilM:http://www.programujte.com/galerie/200609212117_databaze-php5.png"></a></td></tr></table></body></html>

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