Ampliar imagem ao clicar

cnet · 11 de junho de 2009

:Deu to fazendo um site e queria q quando eu clica-se na imagem ela aumenta-se no ar q nem esse site:

http://www.vooz.com.br/blogs/youtube-xl---versao-para-aumentar-o-tamanho-das-imagens-esta-no-ar-5924.html

quando você clica na foto do youtube ele aumenta a imagem.

alguem sabe como fazer esse efeito.

agradeço desde já.

rickayron · 12 de junho de 2009

:Deu to fazendo um site e queria q quando eu clica-se na imagem ela aumenta-se no ar q nem esse site:
http://www.vooz.com.br/blogs/youtube-xl---versao-para-aumentar-o-tamanho-das-imagens-esta-no-ar-5924.html

quando você clica na foto do youtube ele aumenta a imagem.

alguem sabe como fazer esse efeito.

agradeço desde já.

Uma divi fica oculta quando clica ativa essa imagem com transparente

cnet · 13 de junho de 2009

sera q podia me passar o código ??

rickayron · 14 de junho de 2009

sera q podia me passar o código ??

<html>
    <head>
<style type="text/css">
body{
    z-index:2;
}

.plano2{
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
background: url("livro.jpg") repeat-y;
background-color: ;
width: 100%;
height: 100%;
z-index: 1;
}

.plano3{
visibility: hidden;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 600px;
margin-top: -200px;
margin-left: -300px;
text-align: center;
padding: 5 5 5 5px;
border-style: solid;
border-width: 5px;
border-color: #1E679A;
z-index: 3;
}
        </style>
        <script type="text/javascript">
                               //função para mostrar os elementos de 2º e 3º plano
                        function mostra(){
                document.getElementById('plano2').style.visibility="visible";
                document.getElementById('plano3').style.visibility="visible";
            }

                        //função para esconder os elementos de 2º e 3º plano
            function esconde(){
                document.getElementById('plano2').style.visibility="hidden";
                document.getElementById('plano3').style.visibility="hidden";
            }
            </script>

<head>
<title>Lightbox</title>
</head>
<body class="base">

Conteúdo da página em primeiro plano, esse conteúdo fica inacessível ao mostrar a janela modal<br>

<input type="button" name="mostrar" value="mostrar" onclick="mostra();"/>


  <!-- Esse div é o que ficará tampando o conteúdo principal-->
  <div name="plano2" class="plano2" id="plano2"></div>

  <!-- Esse é o div da janela modal, que aparecerá sobre toda a página-->
  <div name="plano3" class="plano3" id="plano3">

Texto sobre a janela modal, note que esse conteúdo é normalmente acessível ao usuário.

<br/>
     <img src="fundo.jpg" onClick="esconde();"/>
  </div>

cara nao testei o codigo se de algum problema posta

lembrando ao ampliar aparecerar uma imagem com a propriedade filter alpha

é necessario ter essa imagem no mesmo diretorio0 ou mudar a localizaçao boa sorte

cnet · 14 de junho de 2009

cara nao testei o codigo se de algum problema posta
lembrando ao ampliar aparecerar uma imagem com a propriedade filter alpha

é necessario ter essa imagem no mesmo diretorio0 ou mudar a localizaçao boa sorte

valeu cara !!!! era isso mesmo!!!

só tem um problema.

na pagina eu tenho uma animação em flash e a div tá aparecendo atrás da animação em flash.

você sabe como faço para joga a div sobre a animação em flash???

rickayron · 28 de junho de 2009

valeu cara !!!! era isso mesmo!!!
só tem um problema.

na pagina eu tenho uma animação em flash e a div tá aparecendo atrás da animação em flash.

você sabe como faço para joga a div sobre a animação em flash???

ola,

para você contornar essa sistuação você pode colocar essa animação em flash dentro de uma div

essa mesma div voce devera jogar ela para o fundo ou fechar div

observe o codigo

<script type="text/javascript">
                               //função para mostrar os elementos de 2º e 3º plano
                        function mostra(){
                document.getElementById('plano2').style.visibility="visible";
                document.getElementById('plano3').style.visibility="visible";
                document.getElementById("Flash").style.visibility="hidden";
}

                        //função para esconder os elementos de 2º e 3º plano
            function esconde(){
                document.getElementById('plano2').style.visibility="hidden";
                document.getElementById('plano3').style.visibility="hidden";
                document.getElementById("Flash").style.visibility="visible";
            }
            </script>

o css contiua a mesma coisa você devera adicionar uma div e substituir as funçoes esconde() e mostra() por essas

a div

<div name='Flash' id='Flash'> sua animaçao em flash</div>

boa sorte

Felipetsa · 17 de julho de 2009

Boa tarde rickayron !

Preciso de uma ajuda sua. Estou desenvolvendo uma página, onde existem algumas imagens. Queria usar um recurso como este que você citou, mas nesse caso a pessoa clicaria no ícone da imagem e então cresceria o zoom.

Compreende ?

Estou com o código aqui:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/gallery-zoom/">
<style type="text/css">
body {color: white;background: white;}
a { color: white; }
.style1 {
    text-align: center;
}
.style2 {
    color: black;
    background-color: #FFFFFF;
}
.style3 {
    color: black;
}
</style><title>..:: INTRANET/EXTRANET :: AXIAL Medicina Diagnóstica ::..</title>
<link href="css/gallery-zoom.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="FP_preloadImgs(/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button32.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button33.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button37.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button38.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button9.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/buttonA.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/buttonC.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/buttonD.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button3.jpg',/*url*/'file:///C:/Documents and Settings/Felipe.Tavares/Configurações locais/Temporary Internet Files/WebTempDir/button4.jpg')">
<div class="style1">
<center>
<img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/images/logo_marketing8X8.jpg" />
</center>
<center>
<hr />
<h1>Gestão Ambiental</h1>

<p class="images">
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/2º%20Gestão%20Ambiental%20RUIDO.JPG" class="livethumbnail">
<img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/2º%20Gestão%20Ambiental%20RUIDO.JPG" largewidth="603" largeheight="709" height="120" width="160"></a>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Papel.bmp" class="livethumbnail"><img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Papel.bmp" largewidth="603" largeheight="709" height="120" width="160"></a>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Peça%2013.%20Gestão%20Ambiental%20AGUA.jpg" class="livethumbnail"><img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Peça%2013.%20Gestão%20Ambiental%20AGUA.jpg" largewidth="603" largeheight="593" height="120" width="160"></a><br>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Radiação.bmp" class="livethumbnail"><img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Radiação.bmp" largewidth="603" largeheight="709" height="120" width="160"></a>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Peça%2014%20-%20Gestão%20Ambiental%20ENERGIA.jpg" class="livethumbnail"><img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Peça%2014%20-%20Gestão%20Ambiental%20ENERGIA.jpg" largewidth="603" largeheight="593" height="120" width="160"></a>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Ruído.bmp" class="livethumbnail"><img src="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/Marketing/Ruído.bmp" largewidth="603" largeheight="709" height="120" width="160"></a></p>
</center>
    <a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/index.html">
    </a><script type="text/javascript" src="javascript/gallery-zoom.js"></script>
<span class="style2"><strong>
<a href="file:///C:/Documents%20and%20Settings/Felipe.Tavares/Desktop/Intranet_Axial/Layout_Intranet/index.html">
<span class="style3">VOLTAR</span></a></strong></span></div>

</body></html>