[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

JavaScript event handler in "DIV"

Posted on 2003-03-14
9
Medium Priority
?
646 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
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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

590 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