Esquema de imagens da globo.com

então provavelmente eles utlilizam dojo...framework eh bem facilfazer isso com o dojo...Abraço!

É somente um layer que geralmente é colocado no final da pagina com o style.display=none mas ele tem todos os outros atributos setados como top, lef, widh, height e quando o usuario clicar no link, é alterado o status do display para inline ou block e quando ele clicar no "X" para fechar é alterado novamente o status do display para none:veja abaixo um exemplo:em javascript que mostra ativa o layer

function changeDisplay(id) { var div = document.getElementById(id); if (div.className=='invisivel') { div.className='visivel'; } else { div.className='invisivel'; } }

a funcao recebe o ID do layer e funciona como uma chave liga-desliga agora a class invisivel e visivel que devem estar ou na pagina ou num arquivo de style

.visivel { display:inline; } .invisivel { display:none; }

e no html<img src="imagetal.jpg" onclick="changeDisplay('layerTal')">no final da pagina:<div id='layerTal' style='postion:absolute; left:100px; top:100px; width:250px;height:280px' class='invisivel'> <div style="width:250px; text-align:right">Fechar [<a href="java script:void(null)" onclick="changeDisplay('layerTal')">x</a>]</div><img src='imagetalMaior.jpg'></div>Veja que o style do div acima poderia estar tambem no arquivo de css e no html usuaria somente do id e o class.

Lightbox.

Você tem razão eu não tinha atentado ao fato da pagina embaixo ficar escura.

Lex só pra documentar eu entrei no link da globo e no link que voce informou e resolvi fazer à minha maneira:

1) no arquivo de style:

>
.visivel { display:inline; }

.invisivel { display:none; }

#overlay{

	position: absolute;

	top: 102px;

	left: 0;

	z-index: 90;

	width: 777px;

	height: 689px;

	background-color:#000;

	opacity:0.8;

	-moz-opacity: 0.8;

	filter: alpha(opacity=80);

	}

defini o começo da máscara logo abaixo do topo do site:como o site está em ajax, e a primeira pagina é a home.html eu coloquei na home a função js pra fechar o layer chamado destaque que inicia aberto pois trata-se de uma promoção.

>

function closeLayer() {

 var lyr = document.getElementById('destaque');

 var ovr = document.getElementById('overlay');

 lyr.className='invisivel';

 ovr.className='invisivel';

 }

Como o layer é o último elemento da página, eu criei o div overlay como ultimo elemento.

>

<style>

 #destaque {

 position:absolute;

 top:150px;

 left:250px;

 width:200px;

 z-index:99}

 

 #tabela {

 color:#000;

 background:#fff;

 border:1px solid #888

 }

 

 #tabela b{color:#004d6f}

 

 </style>

 

 <div id="destaque" class="visivel">

 <table id="tabela" cellPadding="0" cellSpacing="0">

 <tr>

 <td align="right" style="background:url(images/title_bg.jpg) repeat-x">

 <img src="images/close.jpg" style="cursor:pointer" onclick="closeLayer()">

 <tr>

 <td align="center">

 <img src="images/oportunidade.png">

 <tr>

 <td align="center" bgcolor="#000000">

 <a href="java script:maisInfo(<?= $id ?>)" style="border:0">

 <img src="includes/mini.php?img=../<?= $image ?>&wh=200" border="0" style="margin:8px">

 </a>

 <tr>

 <td align="center" style="background:#fff; padding:4px 0">

 Ref.: <?= $ref_imovel ?><br>

 <?= $finalidade ?>:

 <b><?= $result['tip_imovel'] ?></b><br>

 <?= $result['cidade'] ?> / <?= $result['bairro'] ?><br>

 <?= $dorms ?><br>Preço:

 <b style="font-size:12pt"><?= $val ?></b>

 </tr>

 </tr>

 </table>

 </div>

 

 <div id="overlay" class="visivel"></div>

O onclick na imagem do 'X' fechar o layer e altera o style do div overlay, poderia tambem ser criado dinamicamente do div overlay no inicio da pagina e feito um removeChild no closeLayer.

A única coisa que não consegui resolver é que tenho dois selects na home e eles ficam acima da mascara no IE6 mas no FF normal.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.leonimoveis.com.br/home1.jpg&key=a9045e8ac1750c65fff866c9d22e3f2fc8d59f0c89af876b863b50a7c1960198" alt="Imagem Postada" />

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.leonimoveis.com.br/home2.jpg&key=20320282e6f843923cd663912ed09fb914ff10f9aa1cfcbe0d513323dc8398a0" alt="Imagem Postada" />

Testes no FF Mozilla

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.leonimoveis.com.br/home3.jpg&key=a3465ab6474be147f49a5413ae291b9e3d44ce6551c43908208a4a01ce35594a" alt="Imagem Postada" />

Testes no IE 6 talvez no 7 funcione normal porque me parece que ele tá mais compatível

Isso também foi resolvido colocando:

<select style="width:120px" size="1" name="tipoimov" id="tipoimov" class="invisivel">

<select name="dorms" id="dorms" id="dorms" class="invisivel">

e completando o JS acima:

>

function closeLayer() {

 document.getElementById('destaque').className='invisivel';

 document.getElementById('overlay').className='invisivel';

 document.getElementById('tipoimov').className='visivel';

 document.getElementById('dorms').className='visivel';

 }

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.leonimoveis.com.br/home4.jpg&key=433e716d1c1a3cb4eacff061d14c2f598b9775f46f3e2f00ef2b8ab4057adb47" alt="Imagem Postada" />

Bom eu não implementei no site do cliente ainda pois preciso mostrar ainda pra ele e parece que faltando algumas fotos de destaque la no site.