Help me please - Javascript inside a map, inside a div, a tooltip, i don't know. |
For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.
This Month's Contests | Staff Member of the Month | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources
Submission Guidelines
Help me please - Javascript inside a map, inside a div, a tooltip, i don't know. |
Jun 11 2010, 07:39 PM
Post
#1
|
|
Newbie Group: Member Posts: 1 Joined: Jun 2010 Member No: 758,315 |
Good noght, please, somebody help me?
I found this code, i want to putz a tooltip in a image that i put a map. when mouse pass on this part i want to show the text. O código é esse: <script type="text/javascript"> /** * * Javascript Tooltip * * @author Rogerio Alencar Lino Filho * @url http://rogeriolino.wordpress.com * */ /* 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> And this is the basic code of the MAP <area shape="rect" coords="271,847,497,936" href="#"> So, that's it, i would like to show this Div on the Map that i created in a image, say that's possible please hehe ;D thanks ;D |
|
|