nicht angemeldet
Link in DIV-Container nicht klickbar
0 0 0 
Gernot Back
1 Gernot Back
0 0 
Struppi
Link in DIV-Container nicht klickbar
Hallo,
ich habe folgendes Problem:
Im DIV-Container "menu" ist ein Link untergebracht. Dieser funktioniert auch. Wenn ich den Inhalt des Containers aber mit Javascript verändere (document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";), funktioniert der Link nicht mehr. Was könnte hier das Problem sein?
Anbei findet ihr noch den Quelltext.
Vielen Dank im Voraus.
MFG
KebdnK
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<meta name="generator" content="NetAuthor 2.0">
<script type="text/javascript">
<!--
var parentid = false, optional = false;
function show_menu(parentid_new) {
document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";
if(parentid_new != false)
parentid = parentid_new;
if(parentid != false) {
var Xoffset = document.getElementById(parentid).offsetLeft + 10;
var Yoffset = document.getElementById(parentid).offsetTop + 10;
document.getElementById("menu").style.left = Xoffset;
document.getElementById("menu").style.top = Yoffset;
}
document.getElementById("menu").style.visibility = "visible";
document.getElementById("menu").style.zIndex = 10;
}
function kill_menu() {
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("menu").style.zIndex = 1;
}
//-->
</script>
<style type='text/css'>
<!--
#menu {
top: 10px;
left: 10px;
position: absolute;
width: 100px;
background: #ff0066;
color: #000000;
border: 1px solid #bb00ff;
padding: 5px;
z-index: 10;
visibility: hidden;
}
#parent1 {
position: relative;
border: 1px solid black;
z-index: 1;
}
#parent2 {
position: relative;
border: 1px dotted black;
z-index: 1;
}
//-->
</style>
</head>
<body>
<div id='menu' onMouseOut='kill_menu()' onMouseOver='show_menu(false)'><a href='http://www.google.de'>Link</a></div>
<div id='parent1' onMouseOver='show_menu("parent1")' onMouseOut='kill_menu()'>Test1</div>
<div id='parent2' onMouseOver='show_menu("parent2")' onMouseOut='kill_menu()'>Test2</div>
</body>
</html>
-
Hi,
Wenn ich den Inhalt des Containers aber mit Javascript verändere (document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";), funktioniert der Link nicht mehr. Was könnte hier das Problem sein?
innerHTML - aber nicht in jedem Browser. Nutze für die Browser, die es können (außer für Opera) outerHTML.
freundliche Grüße
Ingo-
Hallo Ingo.
Nutze für die Browser, die es können (außer für Opera) outerHTML.
Warum nicht auch für Opera?
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Könnt ihr mir ein Codebeispiel geben?
wenn ich innerHTML durch outerHTML ersetze, schreibt er den Text direkt auf die Seite und nicht ins DIV. -
Hi,
Nutze für die Browser, die es können (außer für Opera) outerHTML.
Warum nicht auch für Opera?
Weil ich mit dem in dieser Beziehung früher mal ein Problem hatte. Es ging um die Verlinkung der URLs in meiner Statistik (oops, die muß ich wirklich wieder mal aktialisieren. ;-)
Wenn ich mich recht erinnere, kam damals Struppi auf die Lösung mit outerHTML, die im Opera 7.x nicht funktionierte.freundliche Grüße
Ingo-
Hallo Ingo.
Wenn ich mich recht erinnere, kam damals Struppi auf die Lösung mit outerHTML, die im Opera 7.x nicht funktionierte.
Seit Version 8 dürfte dies behoben sein.
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Hi,
Seit Version 8 dürfte dies behoben sein.
Jein. outerHTML konnte der 7er auch schon. Aber enn ich dem (8er) das vorsetze, dann fügt er in meiner Statistik zwischen jede Zeile eine Leerzeile ein.
freundliche Grüße
Ingo-
Hallo Ingo.
Aber enn ich dem (8er) das vorsetze, dann fügt er in meiner Statistik zwischen jede Zeile eine Leerzeile ein.
Kann ich bestätigen; meine Version 9 macht dies immer noch.
Einen schönen Freitag noch.
Gruß, Ashura
-
-
-
-
-
Hallo Ingo,
Was könnte hier das Problem sein?
innerHTML - aber nicht in jedem Browser. Nutze für die Browser, die es können (außer für Opera) outerHTML.Ist es nicht umgekehrt? outerHTML funktioniert doch in weniger Browsern und nur als Eigenschaft des All-Objekts, während man innerHTML auch in den meisten Browsern über DOM-Methoden ansprechen kann.
Gruß Gernot
-
-
Hallo KebdnK,
Hallo,
ich habe folgendes Problem:
Im DIV-Container "menu" ist ein Link untergebracht. Dieser funktioniert auch. Wenn ich den Inhalt des Containers aber mit Javascript verändere (document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";), funktioniert der Link nicht mehr.Arbeite lieber hiermit:
http://de.selfhtml.org/javascript/objekte/document.htm#create_element
http://de.selfhtml.org/javascript/objekte/document.htm#create_attribute
http://de.selfhtml.org/javascript/objekte/document.htm#create_text_nodeund den Methoden und Eigenschaften des Node-Objekts.
Gruß Gernot
-
Hallo KebdnK,
function show_menu(parentid_new) {
document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";if(parentid_new != false)
parentid = parentid_new;if(parentid != false) {
var Xoffset = document.getElementById(parentid).offsetLeft + 10;
var Yoffset = document.getElementById(parentid).offsetTop + 10;document.getElementById("menu").style.left = Xoffset;
document.getElementById("menu").style.top = Yoffset;Nur am Rande: Hier fehlen jeweils die Einheiten.
<body>
<div id='menu' onMouseOut='kill_menu()' onMouseOver='show_menu(false)'><a href='http://www.google.de'>Link</a></div>Das Problem liegt darin, dass noch bevor der Klick auf den Link ausgewertet wird, feuert das onmouseover im Div "menu" und tauscht den Link gegen einen anderen aus.
Grüße,
Stefan -
Im DIV-Container "menu" ist ein Link untergebracht. Dieser funktioniert auch. Wenn ich den Inhalt des Containers aber mit Javascript verändere (document.getElementById("menu").innerHTML = "<a href='http://www.google.de'>Link</a>";), funktioniert der Link nicht mehr. Was könnte hier das Problem sein?
Wie Stefan schon sagte, das Problem ist der mouseover der offensichtlich den Klick schon abfängt. Das Problem läßt sich aber durch eine leicht veränderte Logik beheben (das übrigens nur im IE auftrat).
Ich hab dann noch die nötigen Einheiten reingepackt und eine Fehlerprüfung ist auch für JS sinnvoll, Benutzer mit alten Browsern werden es dir danken.
var parent_obj = null, optional = false; function show_menu(parent_new) { if(!document.getElementById) return; var menu = document.getElementById("menu"); if(!menu) return; if(parent_new) { parent_obj = parent_new; menu.innerHTML = "<a href='http://www.google.de'>Link</a>"; menu.style.left = (parent_obj.offsetLeft + 10) + 'px'; menu.style.top = (parent_obj.offsetTop + 10) + 'px'; } menu.style.visibility = "visible"; menu.style.zIndex = 10; } function kill_menu() { if(!document.getElementById) return; var menu = document.getElementById("menu"); if(!menu) return; menu.style.visibility = "hidden"; menu.style.zIndex = 1; }Der HTML Code:
<div id='menu' onMouseOut='kill_menu()' onMouseOver='show_menu(false)'><a href='http://www.google.de'>Link</a></div> <div onMouseOver='show_menu(this)' onMouseOut='kill_menu()'>Test1</div> <div onMouseOver='show_menu(this)' onMouseOut='kill_menu()'>Test2</div>Struppi.