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:
.
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.