Boa noite, por favor, alguém pode me ajudar nisso aqui?
.
Tenho um código que achei ensinando fazer tootip, achei ótimo, mas ainda não cheguei onde quero, pois preciso fazer um MAP em uma imagem e quero quando passar o mouse em cima deste MAP aparecer a TOOLTIP, q no caso aqui está inserida em uma DIV:
O código é esse:
<script type="text/javascript">
/**
*
* Javascript Tooltip
*
* @author Rogerio Alencar Lino Filho
* @url [url=http://rogeriolino.wordpress.com]http://rogeriolino.wordpress.com[/url]
*
*/
/* Configuração */
var id = "minhaTooltip";
var background = "#000000";
var border = "1px solid #999999";
var display = "none";
var font = "10px Verdana, Arial, Sans-serif";
var color = "#ffffff";
var marginX = 13; //distancia do mouse em x
var marginY = 5; //distancia do mouse em y
var opacity = 75; // 0 a 100
var padding = "2px 5px";
var position = "absolute";
var _x = -10;
var _y = -10;
//
function setPos(event) {
if (document.all) {//IE
_x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
_y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
_x += (window.event.clientX+marginX);
_y += (window.event.clientY+marginY);
} else {//Good Browsers
_x = (event.pageX+marginX);
_y = (event.pageY+marginY);
}
}
//
function showTip(text) {
var t = document.getElementById(id);
t.style.display = "block";
document.onmousemove = function(event) {
setPos(event);
t.innerHTML = text;
t.style.left = _x+"px";
t.style.top = _y+"px";
}
}
//
function hideTip() {
var t = document.getElementById(id).style;
t.display = "none";
}
//
function tooltip() {
var body = document.getElementsByTagName("body");
body = body[0];
body.innerHTML += "<div id='"+id+"'></div>";
var t = document.getElementById(id).style;
t.background = background;
t.border = border;
t.display = display;
t.font = font;
t.color = color;
t.opacity = opacity/100;
t.filter = "alpha(opacity="+opacity+")";
t.padding = padding;
t.position = position;
var links = document.getElementsByTagName("a");
for (i=0; i<links.length; i++) {
var title = links[i].getAttribute("title");
if (title) {
links[i].setAttribute("tptitle", title);
links[i].removeAttribute("title");
links[i].onmouseover = function() { showTip(this.getAttribute("tptitle")+"<br />"+this.href); }
} else {
links[i].onmouseover = function() { showTip(this.href); }
}
links[i].onmouseout = function() { hideTip(); }
}
}
//
window.onload = function() {
tooltip();
}
</script>
<style type="text/css">
#geral {
width: 80%;
margin: 0px auto;
}
h1 {
font: 200% Verdana, Arial, Sans-serif;
color: #000000;
}
p {
font: 12px Verdana, Arial, Sans-serif;
color: #333333;
text-align: justify;
}
a {
font: 12px Verdana, Arial, Sans-serif;
color: #0066CC;
}
#rodape {
padding: 10px 0px;
}
#rodape p {
text-align: center;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="geral">
<h1>Tooltip</h1>
<p><a title="Maior site de busca do mundo" href="http://www.google.com/">Ir para o Google</a> Lorem <a href="http://www.terra.com.br/" title="Fofocas fresquinhas">Portal Terra</a> luctus vehicula. </p>
</div>
<div id="rodape">
<p>Rogerio Alencar Lino Filho</p>
<p><a href="http://rogeriolino.wordpress.com/" title="Blog">http://rogeriolino.wordpress.com/</a></p>
</div>
</body>
</html>
.
pronto,..eu copiei e colei a parte antes de head e tal, porém quero q esse div apareça quando eu passar em cima de um MAP (coloquei um Map em uma imagem), por favor, digam q é possivel rsr ;D Obrigada
Editado por quintelab Título alterado conforme as regras do fórum e adicionado BBCode HTML
Pergunta
janinhabb'
Boa noite, por favor, alguém pode me ajudar nisso aqui?
.
Tenho um código que achei ensinando fazer tootip, achei ótimo, mas ainda não cheguei onde quero, pois preciso fazer um MAP em uma imagem e quero quando passar o mouse em cima deste MAP aparecer a TOOLTIP, q no caso aqui está inserida em uma DIV:
O código é esse:
<script type="text/javascript"> /** * * Javascript Tooltip * * @author Rogerio Alencar Lino Filho * @url [url=http://rogeriolino.wordpress.com]http://rogeriolino.wordpress.com[/url] * */ /* Configuração */ var id = "minhaTooltip"; var background = "#000000"; var border = "1px solid #999999"; var display = "none"; var font = "10px Verdana, Arial, Sans-serif"; var color = "#ffffff"; var marginX = 13; //distancia do mouse em x var marginY = 5; //distancia do mouse em y var opacity = 75; // 0 a 100 var padding = "2px 5px"; var position = "absolute"; var _x = -10; var _y = -10; // function setPos(event) { if (document.all) {//IE _x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; _y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; _x += (window.event.clientX+marginX); _y += (window.event.clientY+marginY); } else {//Good Browsers _x = (event.pageX+marginX); _y = (event.pageY+marginY); } } // function showTip(text) { var t = document.getElementById(id); t.style.display = "block"; document.onmousemove = function(event) { setPos(event); t.innerHTML = text; t.style.left = _x+"px"; t.style.top = _y+"px"; } } // function hideTip() { var t = document.getElementById(id).style; t.display = "none"; } // function tooltip() { var body = document.getElementsByTagName("body"); body = body[0]; body.innerHTML += "<div id='"+id+"'></div>"; var t = document.getElementById(id).style; t.background = background; t.border = border; t.display = display; t.font = font; t.color = color; t.opacity = opacity/100; t.filter = "alpha(opacity="+opacity+")"; t.padding = padding; t.position = position; var links = document.getElementsByTagName("a"); for (i=0; i<links.length; i++) { var title = links[i].getAttribute("title"); if (title) { links[i].setAttribute("tptitle", title); links[i].removeAttribute("title"); links[i].onmouseover = function() { showTip(this.getAttribute("tptitle")+"<br />"+this.href); } } else { links[i].onmouseover = function() { showTip(this.href); } } links[i].onmouseout = function() { hideTip(); } } } // window.onload = function() { tooltip(); } </script> <style type="text/css"> #geral { width: 80%; margin: 0px auto; } h1 { font: 200% Verdana, Arial, Sans-serif; color: #000000; } p { font: 12px Verdana, Arial, Sans-serif; color: #333333; text-align: justify; } a { font: 12px Verdana, Arial, Sans-serif; color: #0066CC; } #rodape { padding: 10px 0px; } #rodape p { text-align: center; margin: 0px; padding: 0px; } </style> </head> <body> <div id="geral"> <h1>Tooltip</h1> <p><a title="Maior site de busca do mundo" href="http://www.google.com/">Ir para o Google</a> Lorem <a href="http://www.terra.com.br/" title="Fofocas fresquinhas">Portal Terra</a> luctus vehicula. </p> </div> <div id="rodape"> <p>Rogerio Alencar Lino Filho</p> <p><a href="http://rogeriolino.wordpress.com/" title="Blog">http://rogeriolino.wordpress.com/</a></p> </div> </body> </html>.
pronto,..eu copiei e colei a parte antes de head e tal, porém quero q esse div apareça quando eu passar em cima de um MAP (coloquei um Map em uma imagem), por favor, digam q é possivel rsr ;D Obrigada
Editado por quintelabTítulo alterado conforme as regras do fórum e adicionado BBCode HTML
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.