Avatar billede nathan Nybegynder
14. marts 2003 - 11:50 Der er 11 kommentarer og
1 løsning

onmouseover med JavaSript!

Jeg har et html kode med "div" som følge:
<div id='$_50100049_$' STYLE='POSITION:absolute'<img src='web_kort/roed.gif'></A></div>

Jeg vil gerne have lavet en onmouseover med følgende javascript.
<div id='$_50100049_$' STYLE='POSITION:absolute'><A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#"><img src='web_kort/roed.gif'></A></div>

men her får jeg en javascript fejl. hvad laver jeg forkert?
Avatar billede mm12010 Nybegynder
14. marts 2003 - 12:24 #1
<div id='$_50100049_$' STYLE='POSITION:absolute'><A onMouseOver="doTooltip('event','0')" onMouseOut="hideTip()" href="#"><img src='web_kort/roed.gif'></A></div>
Avatar billede nathan Nybegynder
14. marts 2003 - 12:30 #2
Jeg får "et objekt var ventet" fejl i browser.
Avatar billede mm12010 Nybegynder
14. marts 2003 - 12:35 #3
smid lige koden til dine funktioner
Avatar billede nathan Nybegynder
14. marts 2003 - 12:43 #4
<HTML><HEAD><TITLE>102608pv</TITLE>
<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 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= 160;
var offX= 12;    // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 1;
var tipBorderStyle= "ridge";
var tipPadding= 4;

var messages = new Array();
messages[0] = new Array('','Ejendommen <b>Amager Landevej </b>51, 2. tv.',"#CCFFCC");
messages[1] = new Array('','anything',"#CCFFCC");
messages[2] = new Array('','Opholdsstue',"#CCFFCC");
messages[3] = new Array('','Køkken',"#CCFFCC");
messages[4] = new Array('','Køkken',"#CCFFCC");
messages[5] = new Array('','Køkken',"#CCFFCC");
messages[6] = new Array('','Opholdsstue',"#CCFFCC");
messages[7] = new Array('','Badeværelse',"#CCFFCC");
messages[8] = new Array('','Udsigt fra altan',"#CCFFCC");
messages[9] = new Array('','Soveværelse',"#CCFFCC");
messages[10] = new Array('','Opholdsstue',"#CCFFCC");
messages[11] = new Array('','Opholdsstue',"#CCFFCC");
messages[12] = new Array('','Soveværelse',"#CCFFCC");
messages[13] = new Array('','Soveværelse',"#CCFFCC");
messages[14] = new Array('','Soveværelse',"#CCFFCC");
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 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) {    // 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) {
        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)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ns4)? tooltip.height: (ie4||ie5)? 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>
<A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>1</B></FONT></A><br>
<A onmouseover=doTooltip(event,1) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>2</B></FONT></A><br>
<A onmouseover=doTooltip(event,2) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>3</B></FONT></A><br>
<A onmouseover=doTooltip(event,3) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>4</B></FONT></A><br>
<A onmouseover=doTooltip(event,4) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>5</B></FONT></A><br>
<A onmouseover=doTooltip(event,5) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>6</B></FONT></A><br>
<A onmouseover=doTooltip(event,6) onmouseout=hideTip() href="#"> <FONT face=Arial size=1><B>7</B></FONT></A><br>
<A onmouseover=doTooltip(event,0) onmouseout=hideTip() href="#" ><img src='web_kort/roed.gif' border="0"></A>
<DIV id=tipDiv  style="Z-INDEX: 100; VISIBILITY: hidden; POSITION: absolute"></DIV>
       
</BODY>
</HTML>
Avatar billede nathan Nybegynder
14. marts 2003 - 12:44 #5
den virker fint, men hvis Jeg prøve tilføre den funktion på følgende script virker den ikke!
<html>
<head>
<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 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= 160;
var offX= 12;    // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 1;
var tipBorderStyle= "ridge";
var tipPadding= 4;

var messages = new Array();
messages[0] = new Array('','Agerskov Brandstation',"#CCFFCC");
messages[1] = new Array('','Simon Moos A/S - kloakservice (Agerskov)',"#CCFFCC");
messages[2] = new Array('','Gammelskov Maskinstation',"#CCFFCC");
messages[3] = new Array('','Agerskov Containerplads',"#CCFFCC");
messages[4] = new Array('','Bredebro Komm.'s Olie- og kemikaliemodt.',"#CCFFCC");
messages[5] = new Array('','Bredebro Kommunes Containerplads',"#CCFFCC");
messages[6] = new Array('','Gråsten Kraftvarmeværk',"#CCFFCC");
messages[7] = new Array('','Badeværelse',"#CCFFCC");
messages[8] = new Array('','Udsigt fra altan',"#CCFFCC");
messages[9] = new Array('','Gråsten Brandstation',"#CCFFCC");
messages[10] = new Array('','Gråsten Havn',"#CCFFCC");
messages[11] = new Array('','Bovrup Brandstation',"#CCFFCC");
messages[12] = new Array('','Danish Crown, Blans',"#CCFFCC");
messages[13] = new Array('','Sundeved Kommunes Materialegård',"#CCFFCC");
messages[14] = new Array('','Vester Sottrup Containerplads',"#CCFFCC");
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 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) {    // 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) {
        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)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ns4)? tooltip.height: (ie4||ie5)? 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;
}

//-->
</head>
<body>
</SCRIPT>

<!-- Script - JavaScript -->
<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>
<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/53.png' id='map' width="620" height="449"> </td> <tr> </table>
<div id='$_50100049_$' STYLE='POSITION:absolute'><A onMouseOver="doTooltip('event','0')" onMouseOut="hideTip()" href="#"><img src='web_kort/roed.gif'></A></div>
<div id='$_50100052_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100055_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100080_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100141_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100143_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100144_$' STYLE='POSITION:absolute'><A onMouseOver="doTooltip('event','1')" onMouseOut="hideTip()" href="#"><img src='web_kort/roed.gif' width="15" height="15"></A></div>
<div id='$_50100145_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>
<div id='$_50100146_$' STYLE='POSITION:absolute'><img src='web_kort/roed.gif' width="15" height="15"></div>


<!-- Script - JavaScript-->
<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>
<script language=javascript>document.write(offset_x);</script><script language=javascript>document.write(offset_y);</script>


<td bordercolor="#000080" width="98" bgcolor="#E1E1E1" valign="top">
</td></tr>&nbsp;<tr><td bordercolor="#000080" width="98" bgcolor="#E1E1E1">&nbsp;</td></tr></form>

</body>
</html>
Avatar billede websmith Nybegynder
14. marts 2003 - 13:06 #6
Det kan jo være at JavaScript ikke kan lide dine $ tegn i dine div id'er.

Prøv at ændre id'erne til uden specieltegn, og se om det hjælper
Avatar billede mm12010 Nybegynder
14. marts 2003 - 13:12 #7
hvad er det for en funktion du siger du tilføjer?
Avatar billede nathan Nybegynder
14. marts 2003 - 13:37 #8
mm12010> Jeg menter bare den her:
onmouseover=doTooltip(event,0) onmouseout=hideTip()

websmith> Jeg vil prøve, men Jeg tror ikke det er problemet.
Avatar billede mm12010 Nybegynder
14. marts 2003 - 13:42 #9
onMouseOver="doTooltip('event','0')" onmouseout="hideTip()"
Avatar billede nathan Nybegynder
14. marts 2003 - 13:45 #10
mm12010> den har du vel svaret engang før. Jeg også testet. Den virker ikke.
Avatar billede nathan Nybegynder
14. marts 2003 - 15:44 #11
Jeg har selv løst problemet!
Fejlen var her: Bredebro Komm.'s Olie- og kemikaliemodt.

messages[4] = new Array('','Bredebro Komm.'s Olie- og kemikaliemodt.',"#CCFFCC");
Avatar billede nathan Nybegynder
14. marts 2003 - 15:44 #12
.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester