Box Informativo

Bruno Diaz · October 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?

Edited October 6, 2011 by Bruno Diaz

Bruno Diaz · October 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 · October 6, 2011

Neste link tem bastante coisa deste estilo.

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

Sign In

Box Informativo

Question

Bruno Diaz

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Bruno Diaz

Link to comment

Share on other sites

Bruno Diaz

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity