Neste workshop de DHTML compatível com todos os navegadores vamos criar um sistema para mostrar imagens ao clicar sobre um link. Este script vai nos servir para fazer o típico link para ampliar uma miniatura de uma imagem que se mostra em uma página web. É normal que em uma web se mostrem imagens pequenas e ao clicar sobre elas nos abra uma janela secundaria ou pop-up com a imagem em um tamanho maior. O problema dos pop-ups, como muita gente sabe, é que existem muitos produtos que os bloqueiam, de modo que, para garantirmos que as imagens se mostrarão perfeitamente, vale a pena buscar métodos alternativos para mostrar janelas que não estejam baseadas em pop-ups.

O exemplo em funcionamento pode ser visto em uma página a parte, para termos uma idéia exata do nosso propósito neste workshop.
Antes que nada, cabe esclarecer que faremos este exercício nos apoiando em umas bibliotecas que contém umas funções para manejar camadas de maneira compatíveis com todos os navegadores. Isto é o que denominamos Cross Browser e está explicado detalhadamente em um de nossos manuais: Workshop de Cross-Browser DHTML

Exercício passo a passo

Vamos explicar o sistema passo a passo, para que seja mais fácil de entender para nossos leitores.

Primeiro, devemos incluir as bibliotecas X-Library (explica-se em nosso artigo Cross-Browser. DHTML compatível com todos os navegadores e pode-se baixar em http://www.cross-browser.com/).

<script type='text/javascript' src='../x/x_core.js'></script>

A seguir, vamos mostrar como serão as camadas que vamos utilizar para fazer o exercício.

<div id="ampliacao" style="padding:2 2 2 2px; position:absolute; left: 200px; top: 100px; visibility: hidden; border: 1px solid #666666; background-image: url(images/carregando.gif); background-repeat: no-repeat;">
   <div id="c1">

   </div>
   <div id="fecharampliacao" style="background-color:333333; font-family:arial,verdana; font-size:8pt; line-height:20px; text-align:right;float:right; height: 20px; padding-right:5px;">
<a href="javascript:fechar_ampliacao()" style="color:#ffffff;">[X] Fechar</a>
   </div>
</div>

Como se pode ver, temos uma camada geral chamada "ampliacao", que vamos utilizar para mostrar a imagem. Engloba outras camadas que vamos utilizar para conter o código da imagem e para mostrar o típico botão de fechar a janela. Esta camada "ampliacao" está à princípio oculta e a mostraremos com a imagem correspondente quando se clique um link.

Dentro da camada "ampliacao" vamos ter outras duas camadas. Na primeira, que chamamos "c1", vamos mostrar a imagem correspondente em cada caso. Na segunda camada, chamada "fechaampliacao" vamos colocar um link para ocultar a camada, quando o usuário não desejar continuar vendo a imagem mostrada.

Logo, na página se colocarão links que servirão para mostrar a camada com as diferentes imagens. Estes links terão a seguinte forma:

<a href="javascript:mostra_imagem('images/ancares.jpg',155,80)">Ver imagem Ancares</a>

<a href="javascript:mostra_imagem('images/basel.jpg',155,80)">Ver imagem Basilea</a>

Simplesmente chamam à função Javascript mostra_imagem() enviando nos parâmetros as características da imagem a mostrar.

Funções Javascript relacionadas

Começaremos com a função que se encarrega de mostrar a imagem que se recebe por parâmetro. Basicamente, deve mostrar a imagem correspondente na camada chamada "c1" e logo mostrar a camada "ampliacao". Na prática, incluímos também uma série de instruções para redimensionar o tamanho da camada, de maneira que se ajuste às dimensões da imagem a conter, que variarão de uma a outra.

function mostra_imagem(arquivo,largura,altura){
   xWidth ('ampliacao',largura + 6)
   xHeight ('ampliacao',altura + 6 + 20)
   xWidth ('c1',largura)
   xHeight ('c1',altura)
   xWidth ('fecharampliacao',largura)

   xInnerHtml('c1','<img src="' + arquivo + '" width="' + largura + '" height="' + altura + '" border="0">')
   xShow('ampliacao');
}

Como detalhe importante há que destacar o modo que utilizamos para mostrar a imagem na camada "c1". Fazemos simplesmente re-escrevendo o código HTML dentro da camada, com a função xInnerHtml(), que recebe a camada afetada e o string com o novo código HTML que deve se colocar na camada. Este código será simplesmente a etiqueta <IMG> da imagem, com os atributos como src, width e height extraídos dos parâmetros recebidos.

Para o botão de fechar a camada com a ampliação, o único que fazemos é chamar à função xHide(), que oculta a camada.

function fechar_ampliacao(){
   xHide('ampliacao');
}

Com isto fica comentado o exercício. Mostramos a seguir seu código completo, para que se possa entender de maneira mais global.

<html>
<head>
   <title>Janela para carregar uma imagem</title>
<script type='text/javascript' src='../x/x_core.js'></script>
<script type='text/javascript'>

function mostra_imagem(arquivo,largura,altura){
   xWidth ('ampliacao',largura + 6)
   xHeight ('ampliacao',altura + 6 + 20)
   xWidth ('c1',largura)
   xHeight ('c1',altura)
xWidth ('fecharampliacao',largura)

   xInnerHtml('c1','<img src="' + arquivo + '" width="' + largura + '" height="' + alto + '" border="0">')
   xShow('ampliacao');
}

function fechar_ampliacao(){
   xHide('ampliacao');
}
</script>
</head>

<body>

<div id="ampliacao" style="padding:2 2 2 2px; position:absolute; left: 200px; top: 100px; visibility: hidden; border: 1px solid #666666; background-image: url(images/carregando.gif); background-repeat: no-repeat;">
<div id="c1">

</div>
<div id="fecharampliacao" style="background-color:333333; font-family:arial,verdana; font-size:8pt; line-height:20px; text-align:right;float:right; height: 20px; padding-right:5px;">
<a href="javascript:fechar_ampliacao()" style="color:#ffffff;">[X] Fechar</a>
</div>
</div>

<a href="javascript:mostra_imagem('images/ancares.jpg',155,80)">Ver imagem Ancares</a>
<br>
<br>

<a href="javascript:mostra_imagem('images/basel.jpg',155,80)">Ver imagem Basilea</a>
<br>
<br>

<a href="javascript:mostra_imagem('images/dwlogo-blanco-6.jpg',97,40)">Ver logo de desarrolloweb</a>
<br>
<br>

<a href="javascript:mostra_imagem('images/cabra.jpg',266,250)">Ver uma cabrita</a>
<br>
<br>
<a href="javascript:mostra_imagem('images/madridbanco.jpg',252,207)">Imagem de Madrid</a>

</body>
</html>

Para finalizar, pode-se ver o exemplo em funcionamento.