Ir para conteúdo
Fórum Script Brasil

janinhabb'

Membros
  • Total de itens

    1
  • Registro em

  • Última visita

Sobre janinhabb'

janinhabb''s Achievements

0

Reputação

  1. 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: &lt;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
×
×
  • Criar Novo...