Olá a todos,
eu precisava desenvolver um pequeno "quadrinho pop-up" que aparecesse quando o usuário apontasse o mouse em um link. Para solucionar esse problema, usei CSS e JavaScript, gerando o código abaixo que funciona perfeitamente:<html>
<head>
<script language="javascript" src="popupmsg.js">
/*
* variaveis que guardam as coordenadas
* do mouse
*/
var pageX;
var pageY;
var isShown = false;
/**
* captura o evento de mousemove
*/
document.onmousemove = getMouseCoordinates;
/**
* captura as coordenadas do mouse
*/
function getMouseCoordinates(event) {
ev = event || window.event;
pageX = ev.pageX;
pageY = ev.pageY + 10;
if(isShown) {
changePosition();
}
}
/**
* mostra a janelinha pop-up com o dado
* descrito pelo link
*/
function showPopUp(msg) {
var item = document.getElementById("msgPopUp");
item.innerHTML = msg;
item.style.display = "block";
isShown = true;
}
/**
* esconde a janelinha quando o mouse eh
* tirado de cima do link
*/
function hidePopUp() {
var item = document.getElementById("msgPopUp");
item.style.display = "none";
isShown = false;
}
/**
* muda a posicao da janelinha quando o
* mouse eh movido
*/
function changePosition() {
var item = document.getElementById("msgPopUp");
item.style.top = pageY;
item.style.left = pageX;
}
</script>
</head>
<body>
<div id="msgPopUp" style="position:absolute;display:none;background-color:white;border-color:black;border-style:solid;">
teste popup
</div>
<a href="#" onMouseOver="showPopUp()" onMouseOut="hidePopUp()">aponte aqui</a>
<div id="mouseCoordinates"></div>
</body>
</html>
não alinha absoluto. Apesar de ter o position:absolute; dentro da CSS da minha página JSF também, ele parece estar alinhando de acordo com os demais elementos da página.
Alguém tem idéia do que seja ou como solucionar? Não encontrei nada no Google que me ajude.
[]'s