?
Solved

JavaScript event handler in "DIV"

Posted on 2003-03-14
9
Medium Priority
?
633 Views
Last Modified: 2008-02-01
I have a following line of code in html, and wanted to use with a JavaScript eventhandler for onmouseover, but no luck.

<div id='$_50100049_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>

I tried this one. it is giving me a javascript error.
<div id='$_50100049_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#"><img src='web_kort/roed.gif' width="15" height="15"></A></div>

What I am doing wrong here?
0
Comment
Question by:NightMan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 3

Expert Comment

by:hexagon47
ID: 8135804
can I see your javascript?
0
 
LVL 12

Expert Comment

by:ahosang
ID: 8136067
probably the event parameter is meant for netscape only.
Better to say:
onmouseover="doTooltip(0,event)"
and of course switch the params in your function definition:
doTooltip(evt,integer) {
  ... code..

BECOMES:
doTooltip(integer, evt) {
  .... code...

In IE the event is automatically created and available. Only netsacpe use the event as parameter as you have so in function say:
var e=(window.event)?event:evt;//Netscape uses the evt as per the parameter

Now throughout the function use the variable e.
0
 

Author Comment

by:NightMan
ID: 8136373
I found the problem, It was a "'" in the array data. But I am working on it so I may have more question on this.
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 12

Expert Comment

by:ahosang
ID: 8137913
fair enough. My comment was a total guess based on the event parameter. If you ever need further assistance, please give more code.
0
 

Author Comment

by:NightMan
ID: 8146148
I have the following code used to place some "redspots" on some coordinate related to the MAP.

Every spots have some information, which been retrieve from a database. these information will be stored in a JavaScript array. When I move the mouse over the red spots the information will appear in a window. What I need is the window should freeze while the mouse on the red spot and the box disappear when the mouse moved out of the redspot. now the popup box is moveing with mouse cursor. this is I am trying avoid. Any solution?


see the script is action here : http://www.hostme4ever.com/test/view.htm

the script is here----

<HTML><HEAD><TITLE>map</TITLE>
<script language=javascript>
function getX(obj){
return( obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+getX(obj.offsetParent) );
}
function getY(obj){
return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+getY(obj.offsetParent) );
}
</script>

<SCRIPT language=javascript type=text/javascript>
<!--

var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var IE60 =((navigator.userAgent.indexOf("MSIE 6.0")>-1)&& dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;

var origWidth, origHeight;
if (ns4) {
      origWidth = window.innerWidth; origHeight = window.innerHeight;
      window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

if (nodyn) { event = "nope" }

var tipFollowMouse= true;      
var tipWidth= 150;
var offX= 12;      // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipTopBgColor="#0066CC";
var tipTopFontColor="#FFFFFF";
var tipFontColor= "#000000";
var tipBgColor= "#ffffff";
var tipBorderColor= "#000080";
var tipBorderWidth= 1;
var tipBorderStyle= "ridge";
var tipPadding= 0;

var messages = new Array();
messages[0] = new Array('','Agerskov Brandstation just some text to see how this works',"");
messages[1] = new Array('','Simon Moos A/S - kloakservice (Agerskov) just some text to see how this works',"");
messages[2] = new Array('','Gammelskov Maskinstation',"");
messages[3] = new Array('','Agerskov Containerplads',"");
messages[4] = new Array('','Bredebro Komm.s Olie- og kemikaliemodt.',"");
messages[5] = new Array('','Bredebro Kommunes Containerplads',"");
messages[6] = new Array('','Gresten Kraftvarmevfrk',"");
messages[7] = new Array('','Badevfrelse',"");
messages[8] = new Array('','Udsigt fra altan',"");
messages[9] = new Array('','Gresten Brandstation',"");
messages[10] = new Array('','Gresten Havn',"");
messages[11] = new Array('','Bovrup Brandstation',"");
messages[12] = new Array('','Danish Crown, Blans',"");
messages[13] = new Array('','Sundeved Kommunes Materialegerd',"");
messages[14] = new Array('','Vester Sottrup Containerplads',"");
if (document.images) {
      var theImgs = new Array();
      for (var i=0; i<messages.length; i++) {
        theImgs[i] = new Image();
            theImgs[i].src = messages[i][0];
  }
}
var startStr = '<table width="' + tipWidth + '"><tr><td bgcolor="'+ tipTopBgColor +'"><div align="center"><font size="1" color="'+ tipTopFontColor +'">Kxbenhavn Kommune</font></div></td></tr><tr><td align="center" width="100%">';
var midStr = '</td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';
var tooltip, tipcss;
function initTip() {
      if (nodyn) return;
      tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
      tipcss = (ns4)? document.tipDiv: tooltip.style;
      if (ie4||ie5||ns5||ie60) {      // ns4 would lose all this on rewrites
            tipcss.width = tipWidth+"px";
            tipcss.fontFamily = tipFontFamily;
            tipcss.fontSize = tipFontSize;
            tipcss.color = tipFontColor;
            tipcss.backgroundColor = tipBgColor;
            tipcss.borderColor = tipBorderColor;
            tipcss.borderWidth = tipBorderWidth+"px";
            tipcss.padding = tipPadding+"px";
            tipcss.borderStyle = tipBorderStyle;
      }
      if (tooltip&&tipFollowMouse) {
            if (ns4) document.captureEvents(Event.MOUSEMOVE);
            document.onmousemove = trackMouse;
      }
}

window.onload = initTip;

var t1,t2;      // for setTimeouts
var tipOn = false;      // check if over tooltip link
function doTooltip(evt,num) {
      if (!tooltip) return;
      if (t1) clearTimeout(t1);      if (t2) clearTimeout(t2);
      tipOn = true;
      if (messages[num][2])      var curBgColor = messages[num][2];
      else curBgColor = tipBgColor;
      if (messages[num][3])      var curFontColor = messages[num][3];
      else curFontColor = tipFontColor;
      if (ns4) {
            var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
            tooltip.write(tip);
            tooltip.close();
      } else if (ie4||ie5||ns5||ie60) {
            var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
            tipcss.backgroundColor = curBgColor;
             tooltip.innerHTML = tip;
      }
      if (!tipFollowMouse) positionTip(evt);
      else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
      mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
      mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
      if (tipOn) positionTip(evt);
}

function positionTip(evt) {
      if (!tipFollowMouse) {
            mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
            mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
      }
      var tpWd = (ns4)? tooltip.width: (ie4||ie5||ie60)? tooltip.clientWidth: tooltip.offsetWidth;
      var tpHt = (ns4)? tooltip.height: (ie4||ie5||ie60)? tooltip.clientHeight: tooltip.offsetHeight;
      var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
      var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
      if ((mouseX+offX+tpWd)>winWd)
            tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
      else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
      if ((mouseY+offY+tpHt)>winHt)
            tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
      else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
      if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
      if (!tooltip) return;
      t2=setTimeout("tipcss.visibility='hidden'",100);
      tipOn = false;
}

//-->
</SCRIPT>
</HEAD>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="720" style="border-collapse: collapse" bordercolor="#000080" cellpadding="0" cellspacing="0" border="1">
    <tr>      
    <td width="620" bordercolor="#FFFFFF" rowspan="4"> <img border="0" src='web_kort/kort_850.png' id='map' width="718" height="540">
    </td>
<tr> </table>

<br><br><br><br><br><br><br><br><br>

<div id='$_50100049_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100052_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,1) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100055_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,2) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100080_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,3) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100141_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,4) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100143_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,5) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100144_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,6) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
  <div id='$_50100145_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,7) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
 
<div id='$_50100146_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,8) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' width="15" height="15" border="0"></A></div>
<br><br><br><br><br><br><br><br><br>
<A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#" >
<img src='web_kort/roed.gif' border="0" width="15" height="15"></A>

<DIV id=tipDiv  style="Z-INDEX: 100; VISIBILITY: hidden; POSITION: absolute"></DIV>

<script language=javascript>
offset_x = getX(document.all['map']); //Videresender kort_id til getX og getY funktionerne
offset_y = getY(document.all['map']);
document.write(offset_x);
document.write(offset_y);
document.all['$_50100049_$'].style.left=offset_x + 257;document.all['$_50100049_$'].style.top=offset_y + 430;document.all['$_50100052_$'].style.left=offset_x + 258;document.all['$_50100052_$'].style.top=offset_y + 436;document.all['$_50100055_$'].style.left=offset_x + 246;document.all['$_50100055_$'].style.top=offset_y + 433;document.all['$_50100080_$'].style.left=offset_x + 214;document.all['$_50100080_$'].style.top=offset_y + 12;document.all['$_50100141_$'].style.left=offset_x + 435;document.all['$_50100141_$'].style.top=offset_y + 120;document.all['$_50100143_$'].style.left=offset_x + 405;document.all['$_50100143_$'].style.top=offset_y + 234;document.all['$_50100144_$'].style.left=offset_x + 457;document.all['$_50100144_$'].style.top=offset_y + 190;document.all['$_50100145_$'].style.left=offset_x + 588;document.all['$_50100145_$'].style.top=offset_y + 280;document.all['$_50100146_$'].style.left=offset_x + 511;document.all['$_50100146_$'].style.top=offset_y + 261;
  </script>
             
</BODY>
</HTML>
0
 
LVL 12

Expert Comment

by:ahosang
ID: 8158760
There is a statement about the 15th line of the second script declaration:
var tipFollowMouse= true;
This should be changed to :
var tipFollowMouse= false;

try that to stop the tooltip following the mouse
0
 

Author Comment

by:NightMan
ID: 8162465
Damn.. I did not see that. It worked. Anyway I have another question.
I need to put a check box to disable and enable the spots. How do I do that?

I used this to disable the spots, but I am not able to enable them again. Any solution?

function LoseIt()
{
$_50100049_$.innerHTML = "";
$_50100049_$.outerHTML = "";
$_50100052_$.innerHTML = "";
$_50100052_$.outerHTML = "";
$_50100055_$.innerHTML = "";
$_50100055_$.outerHTML = "";
$_50100080_$.innerHTML = "";
$_50100080_$.outerHTML = "";
$_50100141_$.innerHTML = "";
$_50100141_$.outerHTML = "";
$_50100143_$.innerHTML = "";
$_50100143_$.outerHTML = "";
$_50100144_$.innerHTML = "";
$_50100144_$.outerHTML = "";
$_50100145_$.innerHTML = "";
$_50100145_$.outerHTML = "";
}
0
 
LVL 12

Accepted Solution

by:
ahosang earned 150 total points
ID: 8166203
have a checkbox on your page:
<form>
Check to disable <input type="checkbox" name="enabler" onclick="global=(this.checked)?true:false">
</form>

Then the first line of the doTooltip function:
if (global) return;

That should do it. If the box is ticked, the spots are disabled, if not, they are enabled.

0
 

Author Comment

by:NightMan
ID: 8169943
Yes, I got resolved that already, Thankyou for your replies!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question