Log In · Register

 

Help Topic Rules and Requirements

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

 
 Reply to this topicStart new topic
Help me please - Javascript inside a map, inside a div, a tooltip, i don't know.
janinhabb
post 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
 
« Next Oldest · Webmasters' Corner · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic