Links bei onClick?

[wonderland]

Hi!

Hatte bisher mit JavaScript noch kaum was zu tun.

1. Ich brauche folgendes: <td onClick="diesisteinlink.html">Blabla</td>

Leider funktioniert das so nicht.

Also, wenn ich auf das <td> klicke, dann soll das wirken als wenn ich auf einen normalen Link (<a>) klicken würde, also der Klick bewirkt einen Aufruf der Seite "diesisteinlink.html". Dort wo ich das brauche komme ich mit dem <a> nicht weiter und brauche das per JS.

2. Meine zweite Frage: Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS) des <td> ändern? Am besten per OnMouseOver und OnMouseOut aufgerufen. Wie bekomme ich also diesen Effekt? CSS-Pseudoelemente kann ich hier in diesem Falle nicht wirklich verwenden.

Danke schonmal!

[friedrich]

Hallo.

Also, wenn ich auf das <td> klicke, dann soll das wirken als wenn ich auf einen normalen Link (<a>) klicken würde, also der Klick bewirkt einen Aufruf der Seite "diesisteinlink.html". Dort wo ich das brauche komme ich mit dem <a> nicht weiter und brauche das per JS.

was möchtest du denn erreichen? das <td> insgesamt ein link ist und nicht nur der text?

wenn ja, dann arbeite mit einer liste.

2. Meine zweite Frage: Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS) des <td> ändern? Am besten per OnMouseOver und OnMouseOut aufgerufen. Wie bekomme ich also diesen Effekt? CSS-Pseudoelemente kann ich hier in diesem Falle nicht wirklich verwenden.

verwende auch hierfür eine liste!

so vielleicht?

MfG.

[wonderland]

das <td> insgesamt ein link ist und nicht nur der text?

Ja. Ich habe es nun aber auch ohne Liste geschafft. Wobei mir der Sinn einer Liste bei einer Tabelle noch nicht einleuchtet. Es handelt sich NICHT um eine Navigationsleiste oder so, sondern tatsächlich um eine normale, sichtbare Tabelle mit Inhalt.

so vielleicht?

Der Link ist kaputt. So scheints.

[Marian]

Hallo wonderland,

Ja. Ich habe es nun aber auch ohne Liste geschafft. Wobei mir der Sinn einer Liste bei einer Tabelle noch nicht einleuchtet. Es handelt sich NICHT um eine Navigationsleiste oder so, sondern tatsächlich um eine normale, sichtbare Tabelle mit Inhalt.

Gib dem <a> ein display:block; height:100%; width:100%; margin:0 und dem <td> ein padding:0

Der Link ist kaputt. So scheints.

/ weg

Viele Grüße aus Freiburg,
Marian

[wonderland]

Gib dem <a> ein display:block; height:100%; width:100%; margin:0 und dem <td> ein padding:0

Das habe ich probiert, aber sobald die Tabelle durch ein verkleinertes Fenster horizontal gestaucht wird und ein td einzeilig und ein anderes td zweizeilig ist, gibt es Probleme, weil dann nur die Normhöhe für einzeilig beachtet wird, aber nun ja mehr Platz da ist. Folge ist ein Balken, wie bei einem 16:9-Film (oben unten schwarz), mit der normalen Hintergrundfarbe.

Ich habe bisher immer JavaScript vermieden und auf CSS-Lösungen gesetzt, aber bei dieser Sache muß ich eh schon JS (vom Webmaster her) benutzen, von daher...

[Gunnar Bittersmann]

Hello out there!

1. Ich brauche folgendes: <td onClick="diesisteinlink.html">Blabla</td>
   Leider funktioniert das so nicht.

http://de.selfhtml.org/javascript/objekte/location.htm

2. Meine zweite Frage: Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS) des <td> ändern?

http://de.selfhtml.org/javascript/objekte/style.htm

See ya up the road,
Gunnar

[wonderland]

http://de.selfhtml.org/javascript/objekte/location.htm

Danke! Ich benutze es nun mit onclick='location.href="diesisteinlink.html"' und es funktioniert.

http://de.selfhtml.org/javascript/objekte/style.htm

Das erscheint mir etwas aufwändig, damit werde ich mich später befassen.

[wonderland]

Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS) des <td> ändern?

Ich habe jetzt

function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}

und

<td onMouseOver="Grau(faq);" id="faq"><a href='faq.htm'>&Uuml;bersicht der FAQs</a></td>

Ich möchte, daß die ID mittels Variable, die Grau mitgegeben wird, übertragen und verwertet wird. Leider bekomme ich in der Konsole nur

Fehler: missing name after . operator
Quelltext:
function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}

Was mache ich falsch? Wie gesagt, von JS hab ich nicht allzuviel Ahnung.

[Gunnar Bittersmann]

Hello out there!

Ich habe jetzt
function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}

Wo haste’n das her?

Lies noch mal in http://de.selfhtml.org/javascript/objekte/style.htm das Beispiel für DOM-Syntax.

See ya up the road,
Gunnar

[wonderland]

function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}

Wo haste’n das her?

Ähm... selbst fabriziert. Es gab da irgendwo auf Selfhtml ein Beispiel mit Bildwechsel per JS, so daß ein Button-Effekt erzeugt werden kann. Da hab ich das mit der Variable her und den Rest aus deinem Style-Link.

Lies noch mal in http://de.selfhtml.org/javascript/objekte/style.htm das Beispiel für DOM-Syntax.

Hab ich. Ich steh aber ziemlich aufm Schlauch. HTML und CSS sind toll, aber JS verstehe ich bis dato noch nicht wirklich. Bisher konnte ich nur "document.write" und das war alles. Das Dumme ist nur, daß ich bis morgen früh um 10 Uhr eine Lösung für obiges Problem gefunden haben muß.

[wahsaga]

hi,

function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}

Wo haste’n das her?

Ähm... selbst fabriziert. Es gab da irgendwo auf Selfhtml ein Beispiel mit Bildwechsel per JS, so daß ein Button-Effekt erzeugt werden kann. Da hab ich das mit der Variable her und den Rest aus deinem Style-Link.

Diese Syntax ist (u.a.) für den Zugriff auf Bildelemente definiert, aber nicht generell für alle Elemente.

Ich steh aber ziemlich aufm Schlauch. HTML und CSS sind toll, aber JS verstehe ich bis dato noch nicht wirklich. Bisher konnte ich nur "document.write" und das war alles. Das Dumme ist nur, daß ich bis morgen früh um 10 Uhr eine Lösung für obiges Problem gefunden haben muß.

Warum musst du?

Wer in der Lernphase ist, sollte sich die nötige Zeit nehmen.
Und wer die Lernphase noch nicht so weit abgeschlossen hat, dass er ein definierte Problem lösen kann, sollte nicht anderen versprechen, das Problem lösen zu können.

gruß,
wahsaga

[wonderland]

Diese Syntax ist (u.a.) für den Zugriff auf Bildelemente definiert, aber nicht generell für alle Elemente.

Ok, kannst Du mir denn eine Lösung anbieten?

Warum musst du?

Weil das dann funktionieren sollte, habe aber eine Verlängerung bekommen.

Wer in der Lernphase ist, sollte sich die nötige Zeit nehmen.
[...] sollte nicht anderen versprechen, das Problem lösen zu können.

Bin ich sonst auch der Meinung. Ich mache das im Rahmen eines HiWi-Jobs und der lautete "können Sie mit HTML umgehen?". Bis jetzt habe ich JavaScript noch nie dabei gebraucht, auch der Admin meinte, daß das ja nicht in den Anforderungen des Jobs drin war, also habe ich nichts versprochen was ich nicht kann!

[Struppi]

Bin ich sonst auch der Meinung. Ich mache das im Rahmen eines HiWi-Jobs und der lautete "können Sie mit HTML umgehen?". Bis jetzt habe ich JavaScript noch nie dabei gebraucht, auch der Admin meinte, daß das ja nicht in den Anforderungen des Jobs drin war, also habe ich nichts versprochen was ich nicht kann!

Soweit ich deine Aussagen bisher verstanden habe, brauchst du es jetzt auch nicht. Da dein Problem mit CSS sich lösen läßt.

Struppi.

[wahsaga]

hi,

Diese Syntax ist (u.a.) für den Zugriff auf Bildelemente definiert, aber nicht generell für alle Elemente.

Ok, kannst Du mir denn eine Lösung anbieten?

Eine Möglichkeit des allgemeinen Elementzugriffs hat https://forum.selfhtml.org/?t=142302&m=924634 - weitere Möglichkeiten neben dem Zugriff per ID finden sich auf der gleichen Seite.

Aber der Ansatz, die Referenz gleich beim Aufruf der Funktion zu übergeben, wäre natürlich der noch einfachere.

Und Struppis Hinweis, dass du eigentlich nur CSS bräuchtest, hat auch was Wahres.

gruß,
wahsaga

[wonderland]

Und Struppis Hinweis, dass du eigentlich nur CSS bräuchtest, hat auch was Wahres.

Hatte es mit CSS geschafft... Aber nur mit Safari, Firefox, Opera, Konqueror. Internet Explorer mochte das mal wieder gar nicht. Auch der 7-er nicht. Da dachte ich mir, wenn eh JS (wegen was anderem, was mir vorgegeben wurde) verwendet wird, dann kann ich das auch für sowas Kleines verwenden, um es in jedem Browser vernünftig darstellbar zu machen.

Prinzipiell verwende ich sonst nur CSS.

[wonderland]

Ich denke, daß eure Ratschläge bzgl. CSS gut gemeint sind. Danke dafür. Aber in diesem Fall möchte ich einfach nur wissen wie es mit JS geht. Ich werde mich gerne in JS einarbeiten, wenn ich wieder Zeit habe, aber momentan möchte ich gerade nur dieses Projekt abschließen und dafür brauche ich eine funktionierende function. ZEIT habe ich momentan nicht soviel, daß ich mich jetzt vernünftig einarbeiten kann. Momentan verstehe ich nämlich nur eins nach dem anderen, aber noch nicht wirklich viele Zusammenhänge.

getElementByID hatte ich übrigens auch vorher schon probiert, aber was macht man, wenn man die Syntax nicht beherrscht? Wenn man z.B. Russisch nicht kann, dann muß man es lernen. Die einzelnen Worte reichen nicht aus um einen korrekten Satz zu bilden. Leider gibt es beim Computer aber keine Fehlerkorrektur wie bei Menschen, die einen inkorrekten Satz trotzdem verstehen.

[Struppi]

Ich denke, daß eure Ratschläge bzgl. CSS gut gemeint sind. Danke dafür. Aber in diesem Fall möchte ich einfach nur wissen wie es mit JS geht. Ich werde mich gerne in JS einarbeiten, wenn ich wieder Zeit habe, aber momentan möchte ich gerade nur dieses Projekt abschließen und dafür brauche ich eine funktionierende function. ZEIT habe ich momentan nicht soviel, daß ich mich jetzt vernünftig einarbeiten kann. Momentan verstehe ich nämlich nur eins nach dem anderen, aber noch nicht wirklich viele Zusammenhänge.

Hast du meine Vorschlag probiert?
https://forum.selfhtml.org/?t=142302&m=924677
Bei mir im IE 6 hat es funtkioniert.

getElementByID hatte ich übrigens auch vorher schon probiert, aber was macht man, wenn man die Syntax nicht beherrscht? Wenn man z.B. Russisch nicht kann, dann muß man es lernen.

Du suchst evtl. http://de.selfhtml.org/javascript/index.htm

Struppi.

[wonderland]

Hast du meine Vorschlag probiert?

Ich hatte das vorher so gelöst, wie Du mir da vorgeschlagen hast. Mit Pseudoklassen und margin auf 0, etc. Das Problem erscheint auch erst, wenn das Browserfenster horizontal verkleinert wird und andere TDs dann zweizeilig werden. Dann ist in einer TD wo weniger drinsteht und die dann einzeilig bleibt immer ein Rand oben und unten oder je nachdem welches valign gesetzt ist woanders. td:hover interpretiert der IE nicht. Normalerweise ist mir der IE ziemlich egal, aber bei einer Universitäts-Internetpräsenz kann er mir leider nicht egal sein.

Ich habe vor, es als Liste umzuschreiben, aber ich brauchte jetzt erstmal eine schnelle Lösung, um ein Bugfix schreiben zu können. Ich hinterlasse an dieser Stelle wieder einen Eintrag, wenn ich das in Angriff nehme.

Du suchst evtl. http://de.selfhtml.org/javascript/index.htm

Wahrscheinlich. Oder ein gutes Buch von Amazon. Basiert AJAX nicht auch auf JS?

Auf jeden Fall danke für Deine Hilfe!

[Struppi]

Hast du meine Vorschlag probiert?

Ich hatte das vorher so gelöst, wie Du mir da vorgeschlagen hast. Mit Pseudoklassen und margin auf 0, etc. Das Problem erscheint auch erst, wenn das Browserfenster horizontal verkleinert wird und andere TDs dann zweizeilig werden. Dann ist in einer TD wo weniger drinsteht und die dann einzeilig bleibt immer ein Rand oben und unten oder je nachdem welches valign gesetzt ist woanders.

Das ist völlig normal, wenn du Tabellen verwendest, das ist der Vorteil von Tabellenlayouts, das jede Zelle mit der anderen im zusammenhang steht. Wenn du das nicht willst, musst du das anders machen. Da keiner deine genauen Anforderungen kennt, läßt sich dir aber schwer zu etwas raten oder dir ein Vorschlag machen.

Ich habe vor, es als Liste umzuschreiben, aber ich brauchte jetzt erstmal eine schnelle Lösung, um ein Bugfix schreiben zu können. Ich hinterlasse an dieser Stelle wieder einen Eintrag, wenn ich das in Angriff nehme.

Die hast du bereits, oder?

Du suchst evtl. http://de.selfhtml.org/javascript/index.htm

Wahrscheinlich. Oder ein gutes Buch von Amazon. Basiert AJAX nicht auch auf JS?

Ja.

Struppi.

[wonderland]

Wenn du das nicht willst, musst du das anders machen.

Ja. Dein Vorschlag mit Listen wird sicher zum Zuge kommen. Habe mich diesbezüglich auch noch mal kurz auf cssplay.co.uk umgeschaut.

eine schnelle Lösung
Die hast du bereits, oder?

Ja. Funktioniert wunderbar. :-)

[Marian]

Hallo Gunnar,

function Grau(test) {document.[test].style.backgroundColor = "rgb(230, 230, 230);";}
Lies noch mal in http://de.selfhtml.org/javascript/objekte/style.htm das Beispiel für DOM-Syntax.

Naja, der style-Teil ist ja so in Ordnung. Was zu verbessern ist, ist der Zugriff auf das Element selbst. Einfacher wäre hier natürlich Grau(self) und self.style.

Viele Grüße aus Freiburg,
Marian

[Wonderland]

Was zu verbessern ist, ist der Zugriff auf das Element selbst. Einfacher wäre hier natürlich Grau(self) und self.style.

Ich wollte IDs vermeiden, damit ich einfach nur eine Zeile in der function habe, die man wiederverwenden kann. Also, sie für jedes <td> (hunderte) verwenden kann. Indem irgendwie das aufrufende td übertragen wird.

"self" habe ich auf Deinen Tip hin ausprobiert. Aber die Konsole sagt dazu

Fehler: self.style has no properties

Wie muß ich das mit self machen, was ist der Fehler?

[Marian]

Hallo Wonderland,

Was zu verbessern ist, ist der Zugriff auf das Element selbst. Einfacher wäre hier natürlich Grau(self) und self.style.

Ich wollte IDs vermeiden, damit ich einfach nur eine Zeile in der function habe, die man wiederverwenden kann. Also, sie für jedes <td> (hunderte) verwenden kann. Indem irgendwie das aufrufende td übertragen wird.

Natürlich. IDs referenziert man aber nicht mit document.[id], sondern eben mit document.getElementByID(id).

"self" habe ich auf Deinen Tip hin ausprobiert. Aber die Konsole sagt dazu
Fehler: self.style has no properties
Wie muß ich das mit self machen, was ist der Fehler?

Ich weiß nicht, was du mit ihm gemacht hast, also kann ich dir auch nicht sagen, was du falsch gemacht hast. Du kannst das self nicht innerhalb der Funktion referenzieren, sondern nur innerhalb onclick etc, d. h. du musst das self der Funktion übergeben.

Viele Grüße aus Freiburg,
Marian

[Struppi]

"self" habe ich auf Deinen Tip hin ausprobiert. Aber die Konsole sagt dazu
Fehler: self.style has no properties
Wie muß ich das mit self machen, was ist der Fehler?

Ich weiß nicht, was du mit ihm gemacht hast, also kann ich dir auch nicht sagen, was du falsch gemacht hast. Du kannst das self nicht innerhalb der Funktion referenzieren, sondern nur innerhalb onclick etc, d. h. du musst das self der Funktion übergeben.

Nein!

du verwechselst self mit this. self ist das aktuelle Fenster (also gleich window) this ist das aktuelle Objekt.

Struppi.

[Marian]

Hallo Struppi,

du verwechselst self mit this. self ist das aktuelle Fenster (also gleich window) this ist das aktuelle Objekt.

Mist. Du hast Recht.

Viele Grüße aus Freiburg,
Marian

[wonderland]

function Grau(test) {document.getElementByID([test]).style.backgroundColor = "rgb(230, 230, 230);";}

Das mag er nicht.

<td onMouseOver="Grau(this);" onclick="location.href="faq.htm"" id="faq">&Uuml;bersicht der FAQs</td>

Da meckert er zumindest nicht. Oder zeigt die Konsole nur den ersten schwerwiegenden Fehler an?

[Marian]

Hallo wonderland,

function Grau(test) {document.getElementByID([test]).style.backgroundColor = "rgb(230, 230, 230);";}
Das mag er nicht.

Oh wunder. mit x[y] referenzierst du den y-ten Wert im Array x. Da fehlt da oben aber der Name des Arrays und außerdem ist test keine Zahl. Lass die eckigen Klammern weg. (Dann musst du die Funktion mit this.id aufrufen)

<td onMouseOver="Grau(this);" onclick="location.href="faq.htm"" id="faq">&Uuml;bersicht der FAQs</td>

Warum das onmouseover? Was spricht gegen ein :hover im CSS?

Da meckert er zumindest nicht. Oder zeigt die Konsole nur den ersten schwerwiegenden Fehler an?

Wenn das erreicht wird, was du wolltest, sollte das in Ordnung sein.

Viele Grüße aus Freiburg,
Marian

[wonderland]

Lass die eckigen Klammern weg. (Dann musst du die Funktion mit this.id aufrufen)

Danke, aber... hm...

"Fehler: document.getElementByID is not a function"

function Grau(test) {document.getElementByID(test).style.backgroundColor = "rgb(230, 230, 230);";}

<td onMouseOver="Grau(this.id);" id="faq">&Uuml;bersicht der FAQs</td>

Warum das onmouseover? Was spricht gegen ein :hover im CSS?

td:hover {...} versteht keine einzige Internet Explorer-Version. Wohl aber jeder andere Browser. Wie gesagt, mit einem <a> kann ich hier ausnahmsweise nicht arbeiten und eine Liste habe ich für eine spätere Revision vorgesehen, aber abgesehen davon möchte ich auch gerne lernen wie es mit JS geht.

Ich hatte mit td:hover alles wunderbar mit CSS gebaut und es ging in jedem Browser perfekt - außer dem netten Herrn IE, den ich (wieder mal) verfluche. Ich hab nachgefragt und es wird gewünscht, daß es auch im IE funktioniert, obwohl bei uns fast nur noch FireFox, Safari und Konqueror im Einsatz sind.

:-(

[Marian]

Hallo wonderland,

"Fehler: document.getElementByID is not a function"

Es heißt getElementById. Sorry, das habe ich dir falsch gesagt (aber richtig verlinkt ;) ).

Ich hatte mit td:hover alles wunderbar mit CSS gebaut und es ging in jedem Browser perfekt - außer dem netten Herrn IE, den ich (wieder mal) verfluche. Ich hab nachgefragt und es wird gewünscht, daß es auch im IE funktioniert, obwohl bei uns fast nur noch FireFox, Safari und Konqueror im Einsatz sind.

Drecksteil. Mach doch beides.

Viele Grüße aus Freiburg,
Marian

[wonderland]

JUHU!!!

Funktioniert! Ich muß mich ansonsten wohl mal dringend mit Syntax und so weiter bei JS auseinandersetzen.

Drecksteil. Mach doch beides.

Hab ich jetzt tatsächlich gemacht.

Ein riesiges Dankeschön nochmal!! :-)

[Detlef G.]

Hallo wonderland

function Grau(test) {document.getElementByID(test).style.backgroundColor = "rgb(230, 230, 230);";}

<td onMouseOver="Grau(this.id);" id="faq">&Uuml;bersicht der FAQs</td>

Warum so kompliziert?
Warum übergibst du extra die Id des Elements, wenn du in der Funktion Grau das Element selbst brauchst?

function Grau(test) {test.style.backgroundColor = "rgb(230, 230, 230)";}

<td onMouseOver="Grau(this);" id="faq">&Uuml;bersicht der FAQs</td>

Unabhängig davon würde ich die CSS-Version verwenden und _nur_ für den IE dann mit Javascript nachhelfen.
So funktioniert dann alles auch ohne Javascript.

Auf Wiederlesen
Detlef

[Cheatah]

Hi,

Dort wo ich das brauche komme ich mit dem <a> nicht weiter

warum nicht?

2. Meine zweite Frage: Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS) des <td> ändern? [...] CSS-Pseudoelemente kann ich hier in diesem Falle nicht wirklich verwenden.

Pseudoklassen. Warum nicht?

Cheatah

[wonderland]

Dort wo ich das brauche komme ich mit dem <a> nicht weiter

warum nicht?

Ein <a> befindet sich innerhalb der <td>, kann aber nicht komplett auf die Dimensionen des <td> ausgedehnt werden, wenn ein <td>-Element eine Zeile und ein anderes <td>-Element 2 Zeilen benutzt. folglich kann z.B. die Hintergrundfarbe nicht komplett über die Pseudoklasse geändert werden und auch der klickbare Bereich ist somit zu klein.

[Struppi]

1. Ich brauche folgendes: <td onClick="diesisteinlink.html">Blabla</td>
2. Meine zweite Frage: Wie kann ich per JavaScript die Schrift- und Hintergrundfarbe (mir egal ob HTML oder CSS)

Das ist schlimm was du da mit JS vor hast. Du kannst sehr wohl einen Link mit CSS auf eine Zelle ausdehnen.

Das ganze sieht so aus:

Der CSS code:

table  
{  
   border-collapse:collapse;  
}  
table tr td  
{  
   margin:0;  
   padding:0;  
}  
table td a  
{  
    text-decoration:none;  
    display:block;  
    background-color:yellow;  
}  
* table td a  
{  
    width:100%;  
}  
table td a:hover  
{  
    display:block;  
    background-color:red;  
    color: white;  
}  

und der HTML code dazu:

<table>  
<tr>  
<td>  
ein ganz langer Text  
</tr>  
<tr>  
  
<tr>  
<td><a href="#">link </a></td>  
</tr>  
<tr>  
<td><a href="#">link </a></td>  
</tr>  
</table>

Aber für Linklisten nimmt man besser ein Listenelement, z.b. <ul>

Struppi.