nicht angemeldet
Netscape7.1/Mozilla1.4 - onClick im <td>-Tag funktioniert nicht
Hallo!
Folgende Situation:
Ich möchte eine komplette Tabellen-Zelle mit einem onClick versehen. Bei Click auf die Zelle, soll die Funktion menu() aufgerufen werden, in welcher dann
a) der Inhalt eines Frames geändert wird
b) sich die Hintergrundfarbe der Zelle ändert (damit wird die Zelle als "aktiv" gekennzeichnet
c) in der vorherig "aktiven" Zelle wird auch die Hintergrundfarbe geändert; dadurch wird diese als "inaktiv" gekennzeichet
d) ändern sich auch noch in den beiden betroffenen Zellen (die "aktive" und die "inaktive") hinterlegte Grafiken
Soweit so gut. Im IE6 funktioniert das Ganze. Nur im NS7.1/Moz1.4 nicht. Wie ich herausgefunden habe, wird die Funktion menu() noch nicht mal aufgerufen, wenn ich auf die entsprechende Zelle klicke. Hier der Quelltext:
------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script language="Javascript">
var flag = "news";
var page_marker = 1;
var item = new Array();
var button = new Array();
button["news"] = "http://www.schildersmilies.de//menu/news.gif||http://www.schildersmilies.de/menu/news_bw.gif||http://www.schildersmilies.de/news.html||||#DDCCBB||";
button["list"] = "http://www.schildersmilies.de/menu/liste.gif||http://www.schildersmilies.de/menu/liste_bw.gif||http://www.schildersmilies.de/listofsmile.html||||#DDCCBB||";
button["sonst"] = "http://www.schildersmilies.de/menu/sonstiges.gif||http://www.schildersmilies.de/menu/sonstiges_bw.gif||http://www.schildersmilies.de/sonstiges.html||||#DDCCBB||";
button["guest"] = "http://www.schildersmilies.de/menu/gbuch.gif||http://www.schildersmilies.de/menu/gbuch_bw.gif||http://www.1-2-3-gaestebuch.de/buch.gb?benutzer=LongTom||||#DDCCBB||";
button["english"] ="http://www.schildersmilies.de/menu/english.gif||http://www.schildersmilies.de/menu/english_bw.gif||http://www.schildersmilies.de/fillFrame.html||||#DDDDBB||#BBBB77";
button["public_lt"] ="http://www.schildersmilies.de/menu/public.gif||http://www.schildersmilies.de/menu/public_bw.gif||http://www.schildersmilies.de/fillFrame.html||LongTom||#BBCCDD||#7799BB";
button["inside_lt"] ="http://www.schildersmilies.de/menu/inside.gif||http://www.schildersmilies.de/menu/inside_bw.gif||http://www.schildersmilies.de/fillFrame.html||LongTom||#BBCCDD||#7799BB";
button["simple_lt"] ="http://www.schildersmilies.de/menu/noschild.gif||http://www.schildersmilies.de/menu/noschild_bw.gif||http://www.schildersmilies.de/fillFrame.html||LongTom||#BBCCDD||#7799BB";
button["simpson_lt"] ="http://www.schildersmilies.de/menu/simpsons.gif||http://www.schildersmilies.de/menu/simpsons_bw.gif||http://www.schildersmilies.de/fillFrame.html||LongTom||#BBCCDD||#7799BB";
button["public_do"] ="http://www.schildersmilies.de/menu/public.gif||http://www.schildersmilies.de/menu/public_bw.gif||http://www.schildersmilies.de/fillFrame.html||dooya||#BBDDBB||#77BB77";
button["inside_do"] ="http://www.schildersmilies.de/menu/inside.gif||http://www.schildersmilies.de/menu/inside_bw.gif||http://www.schildersmilies.de/fillFrame.html||dooya||#BBDDBB||#77BB77";
item = button[flag].split("||");
function menu(id)
{
document.write("Hallo");
if (flag != id)
{
page_marker = 1;
if (id == "first")
id = flag;
frames[0].location = (button[id].split("||"))[2];
if (navigator.appName == "Netscape") flag = id;
document.images[flag].src = item[1];
document.getElementsByTagName('td')[flag].style.backgroundColor = "DEDEDE","true";
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = "DEDEDE","true";
flag = id;
item = button[flag].split("||");
document.images[flag].src = item[0];
document.getElementsByTagName('td')[flag].style.backgroundColor = item[4],"true";
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = item[4],"true";
}
}
function goto(section,page)
{
if (section != flag)
{
menu(section);
flag = section;
}
page_marker = page;
frames[0].location = "http://www.schildersmilies.de/fillFrame.html";
}
function homesweethome()
{
window.location="http://www.schildersmilies.de/deifis.html";
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="000000" ALINK="#FF00FF" LINK="#0000ff" VLINK="#FF0000">
<center><img SRC="http://www.schildersmilies.de/banner/banner_schildersmilies.gif" alt="" border=0></center>
<table style="margin-top:2;border:solid 1 #555555;">
<colgroup>
<col width="5%" span="5">
<col width="5%" span="2">
<col width="5%" span="5">
</colgroup>
<tr align="center" bgcolor="#DEDEDE">
<td id = "LongTom" onClick="menu('lt_public')" colspan=4><img src="http://www.schildersmilies.de/menu/longtom_txt.gif" alt="Long Tom"></td>
<td id = "dooya" onClick="menu('do_public')" colspan=2><img src="http://www.schildersmilies.de/menu/dooya_txt.gif" alt="dooya"></td>
<td id = "english" onClick="menu(this.id)" rowspan=2><img name = "english" src="http://www.schildersmilies.de/menu/english_bw.gif" alt="English Smileys"></td>
<td id = "news" onClick="menu(this.id)" rowspan=2><img name = "news" src="http://www.schildersmilies.de/menu/news_bw.gif" alt="News" ></td>
<td id = "list" onClick="menu(this.id)" rowspan=2><img name = "list" src="http://www.schildersmilies.de/menu/liste_bw.gif" alt="Liste aller Smilies"></td>
<td id = "sonst" onClick="menu(this.id)" rowspan=2><img name = "sonst" src="http://www.schildersmilies.de/menu/sonstiges_bw.gif" alt="Sonstiges" ></td>
<td id = "guest" onClick="menu(this.id)" rowspan=2><img name = "guest" src="http://www.schildersmilies.de/menu/gbuch_bw.gif" alt="Gästebuch" ></td>
</tr>
<tr align="center" bgcolor="#DEDEDE">
<td id = "public_lt" onClick="menu(this.id)"><img name = "public_lt" src="http://www.schildersmilies.de/menu/public_bw.gif" alt="Schildersmilies"></td>
<td id = "inside_lt" onClick="menu(this.id)" ><img name = "inside_lt" src="http://www.schildersmilies.de/menu/inside_bw.gif" alt="spezielle Schildersmilies"></td>
<td id = "simple_lt" onClick="menu(this.id)" ><img name = "simple_lt" src="http://www.schildersmilies.de/menu/noschild_bw.gif" alt="Smilies ohne Schilder"></td>
<td id = "simpson_lt" onClick="menu(this.id)" ><img name = "simpson_lt" src="http://www.schildersmilies.de/menu/simpsons_bw.gif" alt="The simpsons" ></td>
<td id = "public_do" onClick="menu(this.id)" ><img name = "public_do" src="http://www.schildersmilies.de/menu/public_bw.gif" alt="Allgemein" ></td>
<td id = "inside_do" onClick="menu(this.id)" ><img name = "inside_do" src="http://www.schildersmilies.de/menu/inside_bw.gif" alt="spezielle Schildersmilies"></td>
</tr>
</table>
<iframe style="border:solid 1 #555555;border-top-style:none;" frameborder=0 width="100%" height="75%" src="news.html">
Die besten und witzigsten Schildersmilies im Netz!
von Long Tom und dooya<br><br>
Keine Inline-Frames? <img src="http://www.schildersmilies.de/schilder/schade.gif" alt=""><br>
Deshalb hier das Wichtigste ;-)<br>
<b>Schildersmilies:</b><br>
<a href="http://www.schildersmilies.de/schildsmile.html">schildsmile.html</a><br>
<b>Smilies ohne Schild:</b><br>
<a href="http://www.schildersmilies.de/othersmilies.html">othersmilies.html</a><br>
<b>Smilies with english signs:</b><br>
<a href="http://www.schildersmilies.de/signsmile.html">signsmile.html</a><br>
<b>Smilies von dooya:</b><br>
<a href="http://www.schildersmilies.de/do_public.html">do_public.html</a><br>
<b>Komplette Liste aller Smilies:</b><br>
<a href="http://www.schildersmilies.de/listofsmile.html">listofsmile.html</a><br>
</iframe>
</BODY>
</HTML>
------------------------------------------------
Bei Click auf die Zelle wird mit onClick die ID des <td>-Tags übergeben. Mit dieser ID werden aus den im HEAD hinterlegten Definitionen von "Button" die entsprechenden Werte ausgelegt, und im Array item hinterlegt (die Trennung der Werte erfolgt durch split()).
Hat jemand eine Ahnung, warum dass im aktuellen NS/Moz nicht funktioniert? Ich weis nicht mehr weiter.
Schon mal danke an alle, die sich hiermit befassen.
Grüsse
Kai Uwe
-
Hallo!
Ein kleiner Nachtrag:
Ihr könnt die Seite "live" unter http://www.schildersmilies.de/ anschauen. Für den Netscape/Mozilla gibt es dort z.Zt. eine Umleitung auf eine Hinweisseite, dass die Seite mit den Browsern im Moment nicht funktioniert. Zudem seht ihr dort die Lösung noch mit dem veralteten "document.all"-Modell. Der hier gepostete Quelltext ist schon auf das "document.getElementsByTagName" umgeschrieben. Die Seite gehört einem Freund. Er hat aber kein Interesse, dass ganze für den Netscape/Mozilla kompatibel zumachen. Daher hantiere ich hier für ihn ein wenig rum, komme aber wie oben beschrieben nicht mehr weiter ...
Grüsse
Kai Uwe
-
Hi!
Versuche doch, Links zu erstellen. Mit CSS bekommst du das sicher hin (Eigenschaft namens "block").
Schau dir mal meine Seite an, oder die vom W3C (wwww.w3.org).
Das CSS hierzu findest du unter http://www.marcreichelt.de/css/standard.css.Schau nach den Einträgen:
display: block;
Viel Glück!
cu
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!!!
SELFCode: ss:| zu:) ls:[ fo:} de:[ va:} ch:? sh:) n4:° rl:? br:^ js:( ie:% fl:) mo:)
http://emmanuel.dammerer.at/selfcode.html-
Hallo!
Danke für deine Antwort, Marc. Vielleicht ist das ne Alternative. Dennoch würde ich gerne wissen, wo in meinem Code der Wurm drin ist. Mir fallen keine Fehler auf. Und gemäss den Standards müsste das Ganze so laufen. Oder sehe ich das falsch?
Hat vielleicht jemand anderes eine Idee? Gut, mein Posting ist gerade mal 2-3 Stunden her. Vielleicht kommt ja noch jemand, der den mir fehlenden Durchblick hat.
Grüsse
Kai Uwe
-
Hallo!
Betrachtet das bitte nicht als Spam! Mir ist aber beim lesen meines Postings aufgefallen, dass die gesamte Code-Menge ganz schön erschlagend ist, und vielleicht nicht jeder versteht, wo mein Problem liegt. Daher habe ich mal die betreffenden Code-Stellen raus kopiert:
-------------------------------------------------
function menu(id)
{
document.write("Hallo");
if (flag != id)
{
page_marker = 1;
if (id == "first")
id = flag;
frames[0].location = (button[id].split("||"))[2];if (navigator.appName == "Netscape") flag = id;
document.images[flag].src = item[1];
document.getElementsByTagName('td')[flag].style.backgroundColor = "DEDEDE","true";
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = "DEDEDE","true";flag = id;
item = button[flag].split("||");document.images[flag].src = item[0];
document.getElementsByTagName('td')[flag].style.backgroundColor = item[4],"true";
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = item[4],"true";}
}function goto(section,page)
{
if (section != flag)
{
menu(section);
flag = section;
}
page_marker = page;
frames[0].location = "http://www.schildersmilies.de/fillFrame.html";
}function homesweethome()
{
window.location="http://www.schildersmilies.de/deifis.html";
}-------------------------------------------------
Das ist die Funktion menu() im HEAD. Die aufgerufen werden soll.-------------------------------------------------
<td id = "public_lt" onClick="menu(this.id)"><img name = "public_lt" src="http://www.schildersmilies.de/menu/public_bw.gif" alt="Schildersmilies"></td>
<td id = "inside_lt" onClick="menu(this.id)" ><img name = "inside_lt" src="http://www.schildersmilies.de/menu/inside_bw.gif" alt="spezielle Schildersmilies"></td>-------------------------------------------------
Und das sind z.B. zwei <td>-Tags, aus welchen ich mit onClick die Funktion menu() aufrufen will. Wie gesagt, mit dem IE klappt das. NS und Moz streiken aber. Die Funktion wird erst gar nicht aufgerufen. Dabei unterstützt der Mozilla und somit auch der Netscape7.x gegenüber dem Netscape4.x Eventhandler wie onClick doch in allen Tags. Oder?Grüsse
Kai Uwe
-
-
-
-
Hallo Kai Uwe,
<script language="Javascript">
Das type-Attribut fehlt, das language-Attribut ist praktisch überflüssig.
var flag = "news";
var page_marker = 1;Das gesamte auf JavaScript basierende Sitekonzept sollte meiner Meinung nach komplett überdacht werden - das Menüscript ist nur ein kleiner Teil davon, es hängt mit den Scripten in zahlreichen anderen Dokumenten (z.T. automatisch mit Javascript generiert) zusammen. All diese Scripts bedürfen einer grundlegenden Überarbeitung. Javascript ist kein angemessenes Werkzeug, um clientseitig Dokumente zu generieren.
var item = new Array();
item = button[flag].split("||");Der item-Array und das Aufsplitten des Strings ist unnötig.
var button = new Array();
button["news"] = "http://www.schildersmilies.de//menu/news.gif||http://www.schildersmilies.de/menu/news_bw.gif||http://www.schildersmilies.de/news.html||||#DDCCBB||";Man kann auch direkt mit einem Array arbeiten:
button['news']=['menu/news.gif', 'menu/news_bw.gif', 'news.html', '', '#DDCCBB', ''];
button['news'][0] beinhaltet dann »menu/news.gif« usw.page_marker = 1;
Das page_marker-Konzept habe ich nicht verstanden, es hängt auch zu sehr mit den Unterseiten zusammen.
frames[0].location = (button[id].split("||"))[2];
button[id][2]
Wobei hier bei einigen Menüeinträgen das ominöse Dokument fillFrame.html geladen wird, was vollkommen auf JavaScript aufbaut.
if (navigator.appName == "Netscape") flag = id;
Das kann dann wohl weg.
document.images[flag].src = item[1];
Das ist ok (besser als die Ausgangskonstruktion), button[flag][1] dem obigen Vorschlag folgend.
document.getElementsByTagName('td')[flag].style.backgroundColor = "DEDEDE","true";
Bitte lies in Selfhtml nach, wie getElementsByTagName funktioniert und für was es gut ist. Du suchst offenbar: document.getElementById(flag).style.backgroundColor='#dedede';
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = "DEDEDE","true";if (button[flag][3].length > 0)
document.getElementById(button[flag][3]).style.backgroundColor='#dedede';(Soll heißen: Wenn der Name gesetzt ist, ändere die Hintergrundfarbe der Zelle mit der ID des Namens.)
flag = id;
item = button[flag].split("||");
document.images[flag].src = item[0];
document.getElementsByTagName('td')[flag].style.backgroundColor = item[4],"true";
if (item[3].length > 0)
document.getElementsByTagName('td')[item[3]].style.backgroundColor = item[4],"true";Siehe oben.
function goto(section,page) (...)
Wie gesagt - ich rate dir/euch, die komplette Seite zu überarbeiten, JavaScript nur optional einzusetzen und die Daten serverseitig zu speichern und die Dokumente entsprechend serverseitig zu generieren.
<BODY BGCOLOR="#FFFFFF" TEXT="000000" ALINK="#FF00FF" LINK="#0000ff" VLINK="#FF0000">
<center><img SRC="http://www.schildersmilies.de/banner/banner_schildersmilies.gif" alt="" border=0></center>Solche Formatierungen können einfacher über CSS gelöst werden. Effizienter CSS heißt zudem, die Formatierungen auszulagern - wenn möglich global (verallgemeinernd) und zentral (in einem externen/separaten Style Sheet).
<table style="margin-top:2;border:solid 1 #555555;">
Besser ausgelagerte Styles, außerdem fehlen bei den numerischen Werten die Einheiten (px!). »#555555« abgekürzt: »#555«.
<colgroup>
<col width="5%" span="5">
<col width="5%" span="2">
<col width="5%" span="5">
</colgroup>Welchen Sinn hat das denn?
<tr align="center" bgcolor="#DEDEDE">
<td id = "LongTom" onClick="menu('lt_public')" colspan=4><img src="http://www.schildersmilies.de/menu/longtom_txt.gif" alt="Long Tom"></td>»id="LongTom"« - es dürfen keine Leerzeichen zwischen Attributname, Gleichheitszeichen und Attributwert auftauchen! Dieser Fehler tritt mehrfach auf und muss unbedingt korrigiert werden.
<iframe style="border:solid 1 #555555;border-top-style:none;" frameborder=0 width="100%" height="75%" src="news.html">
Die Einheit px fehlt wieder.
Immerhin ist das iframe-Element gefüllt.
Hat jemand eine Ahnung, warum dass im aktuellen NS/Moz nicht funktioniert?
Das hat zahlreiche Gründe.
Ich weis nicht mehr weiter.
Für die weitere Arbeit: Schaue dir die Fehlermeldungen in der JavaScript-Konsole an. http://glasgoogle.de/
Ein allgemeiner Hinweis: Auf der Seite treten schwerwiegende Markup- und CSS-Fehler auf und das technische Gesamtkonzept ist extrem fehlerhaft und problembehaftet. JavaScripts werden für Aufgaben genutzt, welche anders gelöst werden sollten, die meisten Scripts sind ineffizient (überladen) und inkompatibel (das weißt du). Daher mein Rat zum »Relaunch«. Die Markup- und CSS-Fehler müssen ausgebügelt werden, bevor überhaupt JavaScript ins Spiel gebracht wird, dabei helfen dir die Validatoren http://validator.w3.org/ und http://jigsaw.w3.org/css-validator/.
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">-
Hallo Mathias,
»id="LongTom"« - es dürfen keine Leerzeichen zwischen Attributname, Gleichheitszeichen und Attributwert auftauchen!
In XML und damit XHTML ist das aber nicht der Fall. Ob es bis HTML 4 so war, habe ich nicht überprüft, aber es würde mich doch wundern.
Grüße
Daniel
-
Hi Daniel,
»id="LongTom"« - es dürfen keine Leerzeichen zwischen Attributname, Gleichheitszeichen und Attributwert auftauchen!
In XML und damit XHTML ist das aber nicht der Fall. Ob es bis HTML 4 so war, habe ich nicht überprüft, aber es würde mich doch wundern.
http://www.edition-w3c.de/TR/2000/REC-xml-20001006/#NT-Eq Tatsächlich... war mir nicht bekannt.
Es ist in (SGML-)HTML übrigens auch möglich, insofern stimmt meine Aussage nicht. Da mir diese Notation aber noch nie begegnet war, bezweifle ich, dass sie hinreichend kompatibel ist, ich würde davon abraten.
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">
-
-
-
hi,
Hat jemand eine Ahnung, warum dass im aktuellen NS/Moz nicht funktioniert? Ich weis nicht mehr weiter.
Wie kommst Du darauf, dass es nicht funktioniert? Teste selber:
<html>
<head>
</head>
<body>
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td id="test" onclick="alert(this.id)">
test
</td>
</tr>
</table>
</body>
</html>klappt im Mozilla 1.4 einwandfrei. Dein Fehler liegt also woanders. Da hilft nur die Ochsentour: Staendiger Blick in die Javascript-Konsole und test-alerts an allen kritischen Punkten im Programmablauf, um den jeweiligen Status festzustellen. Ich nutze oft auch ein form-input zur Testausgabe, weil dann der Programm-Ablauf nicht durch den alert unterbrochen wird.
Gruesse Joachim
-
Hallo!
Erst mal allen vielen Dank (Joachim, molily, Daniel und Marc)!
Habe einige interessante Anstösse erhalten, und mal einiges ausprobieren. Bin echt begeistert, dass man hier im Forum innerhalb weniger als 12 Stunden so viele Antworten erhält!!
Grüsse
Kai Uwe