Janelinha

Gumpee · Setembro 12, 2011

Galera, estou tendo um pequeno problema, na criação de uma página para meu site, ela tem que fazer isso:

Explicação:

Quando eu passar o mouse na imagem, uma janalinha se abre, que não pode ser uma pop-up, devido ao bloquador de pop-ups, e essa será a função principal dessa página...

Então, dentro dessa janelinha, eu quero colocar varios links, porém eu já tentei de varias formas, e creio que Javascript será a melhor opção, se alguém puder me ajudar, eu agradeço

eai, alguém sabe fazer?

pelo Amor de Deus, alguém ajuda ai, G_G

.Andreia. · Setembro 16, 2011

sugestão 1: usar DIV

sugestao 2: usar um framework

Leonardo.j · Setembro 17, 2011

Eu acho mais fácil você usar Jquery, com .mouseover() Quando colocar mouse em cima executar a func .show() e quando tirar executar .hide() teria que colocar ID mais nad é complicado ...

Gumpee · Setembro 20, 2011

Eu fui pela sugestão da .Andreia, e procurei um script pronto, que mais ou menos facilitou, pórem não faz exatamente oque eu quero, e eu queria ajuda pra modificar corretamente!

Ai vai o script:

<html>
<head>
<title>link box</title>
<style>
#messageBox{
border-right: 1px solid #000000;
position: absolute;
width: 517px;
height: 100px;
z-index: 1;
background-color: #C0C0C0;
border-style: solid;
border-width: 1px;
display:none;
}
#closeButt{
width: 100%;
height: 10px;
z-index: 1;
cursor: pointer;
left: 0px;
top: 0px;
background-color: #808080;
}
#contents{
width: 100%;
height: auto;
z-index: 2;
}
</style>
<script language="javascript">
function show(obj,msg){
messageBox.style.top=obj.offsetTop
messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5
contents.innerHTML=msg+"<p>"+obj.href
messageBox.style.display="block"
}
</script>
</head>

<body>

<p><a onmouseover="show(this,'this is my message#1')" href="http://www.google.com">link1: go to google</a></p>
<p><a onmouseover="show(this,'this is my message#2')" href="http://www.MSN.com">link2: go to MSN</a></p>
<p><a onmouseover="show(this,'this is my message#3')" href="http://www.dreamincode.com/">link3: go to DIC</a></p>
<div id="messageBox">
<div onclick="messageBox.style.display='none'" id="closeButt">x Click to close</div>
<div id="contents"></div>
</div>
</body>
</html>

Uma das correções, é que eu quero saber a função correta pra substituir isso:

<div onclick="messageBox.style.display='none'" id="closeButt">x Click to close</div>

(Que no caso, só fecha a janela quando eu clico em Click to Close, e eu quero que quando tire o mouse, feche) --Coloquei a função onmouseout no lugar de onclick, só que dai a funçao se aplica somente ao Click to close =x

e a outra correção:

Dentro da janela, não está funcionando os links, está funcionando assim: O texto que deveria: Quando eu passar o mouse abrir a janela, está sendo o link, e o link deveria ser dentro da janela, se alguém puder me ajudar eu agradeço, e se fui pouco claro nas explicações, só postar que eu serei mais claro!

Editado Setembro 20, 2011 por Gumpee

.Andreia. · Setembro 20, 2011

QUOTE<html>
<head>
<title>link box</title>
<style>
#messageBox{
    border-right: 1px solid #000000;
    position: absolute;
    width: 517px;
    height: 100px;
    z-index: 1;
    background-color: #C0C0C0;
    border-style: solid;
    border-width: 1px;
    display:none;
}
#closeButt{
     width: 100%;
     height: 10px;
     z-index: 1;
     cursor: pointer;
     left: 0px;
     top: 0px;
     background-color: #808080;
}
#contents{
    width: 100%;
    height: auto;
    z-index: 2;
}
</style>

<script language="javascript">
function show(obj,msg){
   messageBox.style.top=obj.offsetTop
   messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5
   contents.innerHTML=msg +"<p><a href='"+ obj.href +"'>"+ obj.href +"</a>";
   messageBox.style.display="block"
}
function hide(obj) {
    obj.style.display = "none";
}
</script>
</head>

<body>

<p><a onMouseOver="show(this,'this is my message#1')" href="http://www.google.com">link1: go to google</a></p> 
<p><a onMouseOver="show(this,'this is my message#2')" href="http://www.MSN.com">link2: go to MSN</a></p> 
<p><a onMouseOver="show(this,'this is my message#3')" href="http://www.dreamincode.com/">link3: go to DIC</a></p>

<div id="messageBox" onMouseOut="hide(this)">
<div onClick="hide(messageBox)" id="closeButt">x Click to close</div> <div id="contents"></div> </div> </body> </html>

usando Jquery, exemplo de um site: http://viniciusdepaula.com/blog/examples/E...%20jQuery.html#

codigo: http://www.viniciusdepaula.com/blog/exibir...div-com-jquery/

Gumpee · Setembro 21, 2011

Mas com esse código, a função do onMouseOut, só se aplica a janela, quando eu tiro o mouse da janela, dai sim fecha, mas o certo seria fechar quando eu tirar o mouse da mesma que abre.

Entrar

Janelinha

Pergunta

Gumpee

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

Leonardo.j

Link para o comentário

Compartilhar em outros sites

Gumpee

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

Gumpee

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades