Janelinha

Gumpee · September 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. · September 16, 2011

sugestão 1: usar DIV

sugestao 2: usar um framework

Leonardo.j · September 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 · September 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!

Edited September 20, 2011 by Gumpee

.Andreia. · September 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 · September 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.

Sign In

Janelinha

Question

Gumpee

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

.Andreia.

Link to comment

Share on other sites

Leonardo.j

Link to comment

Share on other sites

Gumpee

Link to comment

Share on other sites

.Andreia.

Link to comment

Share on other sites

Gumpee

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity