Mostrar Um <div>

Rapper · Dezembro 17, 2004

Bom o que to querendo é que quando eu passar o mouse sobre o "LINK", abrir esse <DIV> com os dados.

<div id="dados" style="position:absolute; left:8px; top:12px; width:134px; height:93px; z-index:1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center"><td colspan="2"><b><font size="2" face="Verdana"><%=Server.HTMLEncode(nome)%></font></b></td></tr>
<tr align="center"><td colspan="2"><div align="center"><img src="<%=botao%>" width="88" height="31" hspace="0" vspace="5"></div></td></tr>
<tr><td colspan="2"><div align="justify"><font size="1" face="Verdana"><%=descricao%></font></div></td></tr>
</table>
</div>

Um exemplo do que to tentando é esse aqui: Exemplo só passar o mouse se uma das 4 noticias logo ali em cima no site, aparece a descrição e tal, to querendo fazer daquele geito ali, ageitar meu divi pra acompanha o mouse sobre o link igual a esse ai. bom se alguém poder me ajudar agradeço. Valeu!

Crystian · Dezembro 17, 2004

Bom olhei o link q você passou e não faz nada, pelo menos não no Mozilla 1.6 que é o que eu estou utilizando. Quanto a fazer o q você quer, eu já postei um exemplo, não sei se é bem isso, ma s vamos lá...

Não gosto de ficar postando esse tipo de código, mas sei q esse é bem requisitado...

<html>
<head>
<script>
function mostra(evt, msg){
	if(navigator.appName == 'Netscape'){ x =(evt.layerX); y=(evt.layerY);}
    else { x = (evt.x); y = (evt.y);}
    var obj = document.getElementById('title');
    if(obj != undefined){
        obj.style.visibility = 'visible';
        obj.style.top = y+10;
        obj.style.left = x+20;
        obj.innerHTML = "<font color='#000000' size='2'>"+msg+"</font>";
    }
}
function tira(){
    var obj = document.getElementById('title');
	if(obj != undefined) obj.style.visibility = 'hidden';

}
</script>
<style>
#title {
	overflow: auto;
    width: 100;
    height: 75;
    position: absolute;
    visibility: hidden;
    background: #FFFF99;
    color: #000000;
    border: 1px dashed #0000FF;
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -moz-opacity: .5;
    opacity: .5;
}
</style>
</head>
<body>
<div id="title"></div>
<a href="teste.htm" onmouseover="mostra(event, 'Este é um teste.');" onmouseout="tira();">teste</a>
</body>
</html>

Não testei, mas acredito q esteja funfando beleza... Qualquer coisa post ae...

Abraço

Crystian

Rapper · Dezembro 17, 2004

bom basicamente é isso ai que quero.

só que é o seguinte eu tava tentando dessa forma aqui oh:

var nav = (document.layers);
var iex = (document.all);
var skn = (nav) ? document.dados : dados.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mover_janela;
function dados(nome,botao) {
	var tabela ="<table bgcolor='#D5F4BF' width='130' border='0' cellspacing='0' cellpadding='0' style='border: 1 solid #000000'><tr align='center'><td height='20' bgcolor='#9ADE79' style='border-bottom: 1 solid #000000'><font size='1' face='Verdana'><b>"+nome+"</b></font></td></tr><tr align='center'><td><div align='center'>"+botao+"</div></td></tr></table>";
	if (nav) { 
    	skn.document.write(tabela); 
    skn.document.close();
    skn.visibility = "visible";
  	}
    else if (iex) {
    document.all("dados").innerHTML = tabela;
    skn.visibility = "visible";  
  	}
}
function mover_janela(e) {
	var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; 
	var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
	skn.left = x - 20;
  	skn.top  = y + 20;
}
function fecha() { document.getElementById("dados").style.visibility = "hidden"; }

<div id="dados"></div>

<a href="teste.asp" onMouseOver="dados('<%=nome%>','<div align=center><img src=<%=botao%> hspace=0 vspace=5></div>'); status='Ver dados do site: ( <%=nome%> )'; return true;" onMouseOut="status=''; fecha();">TESTE</a>

só que é o seguinte, quando passo o mouse em cima ele aparece os dados no <div> só que, o <div> não fica ao lado do "pontero" do mouse, ele aparece no final da pagina, e quando tipo o mouse de cima do link ele some, mas depois coloco dinovo ele não aparece mais. :/

Ricardo Cobain · Dezembro 20, 2004

Se liga nesse cara é super simples!

<a href="#" OnMouseOver="window.dados.style.visibility='visible'"
OnMouseOut="window.dados.style.visibility='hidden'">
Abrir</a>
<div id="dados" style="visibility:hidden;position:absolute;top:15;left:40">
- conteudo
</div>

Sobre a questão do local de abertura, pasta colocar a posição!

Falo e espero que tenha servido!

Entrar

Mostrar Um <div>

Pergunta

Rapper

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Crystian

Link para o comentário

Compartilhar em outros sites

Rapper

Link para o comentário

Compartilhar em outros sites

Ricardo Cobain

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades