Box Informativo

Bruno Diaz · Outubro 6, 2011

Pessoal,

Estou em um projeto para uma loteamento.

Existe uma imagem de mapa dos lotes e, para cada lote, preciso que apareça informações quando o internauta passe o mouse na área de um determinado terreno (usando a tag map). Neste box que aparece, irá aparecer tamanho de área, se está vendido ou não, etc., ou seja conteúdo de texto extraido de um banco de dados.

A parte do da programação em ASP é sussa, só este ráio de box que não tenho ideia como fazer...

Seria mais ou menos uma DIV que abre quando o mouse passa no link, mas não clicando e sim como um onmouseover, e fecha quando o mouse sai do espaço selecionado.

Alguma dica?

Editado Outubro 6, 2011 por Bruno Diaz

Bruno Diaz · Outubro 6, 2011

Achei na net algo e construi o que queria... segue código para posteriormente ajudar alguém na mesma dificuldade.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
&lt;script language="javascript"> 
<!--
function fechaDiv1(){
 document.getElementById("Layer1").style.display = 'none';
 }
function abreDiv1(){ 
document.getElementById("Layer1").style.display = 'block';
 }
function fechaDiv2(){
 document.getElementById("Layer2").style.display = 'none';
 }
function abreDiv2(){ 
document.getElementById("Layer2").style.display = 'block';
 }
//-->
</script>
<style type="text/css">
<!--
#Layer1 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:1;
        background-color: #FFFF00;
        border-color:#FF0000;
        border-style:double;
        display: none;
}
#Layer2 {
        position:absolute;
        width:200px;
        height:115px;
        z-index:1;
        background-color: #FFFF00;
        border-color:#FF0000;
        border-style:double;
        display: none;
}
-->
</style>
</head>
<body>

 <a href="#" onMouseOver="abreDiv1();" onMouseOut="fechaDiv1();">Terreno 1</a>
 <br>
 <a href="#" onMouseOver="abreDiv2();" onMouseOut="fechaDiv2();">Terreno 2</a>


  
<td bgcolor="#CC0033">
<div class="style1" id="Layer1">
<div align="center">
<p>Terreno 1</p>
<p>Área 600m²</p>
<p>Vendido</p>
</div>
</div>
<div class="style2" id="Layer2">
<div align="center">
<p>Terreno 2</p>
<p>Área 500m²</p>
<p>Vago</p>
</div>
</div>
</td>
        
</body>
</html>

Depois é só fazer um Loop carregando as layers com a quantidade de terreno do BD e um abraço.

Se alguém tiver alguma ideia melhor, a dica é bem vinda!

Bruno Diaz · Outubro 6, 2011

Neste link tem bastante coisa deste estilo.

http://coding.smashingmagazine.com/2007/06...ript-css-dhtml/

Entrar

Box Informativo

Pergunta

Bruno Diaz

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Bruno Diaz

Link para o comentário

Compartilhar em outros sites

Bruno Diaz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades