nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Struppi
Guten Tag,
ich habe eine Seite, auf der eine Deutschlandkarte mit Linkmap ist. Die Links verweisen auf entsprechende Zeilen in einer Tabelle weiter unten auf der Seite, die mit dem <a name="X"> Tag benamt sind.
Ich würde es jetzt aber gerne so einrichten, dass sich immer die zum Link gehörende Zeile der Tabelle verfärbt (Hintergrund gelb), wenn oben der Mauszeiger über den entsprechenden Link fährt.
Wie kann ich dass erreichen, bzw. wie müsste eine Funktion aussehen, die soetwas kann?
Vielen Dank im voraus.
Heinrich Krebs
@@Heinrich Krebs:
ich habe eine Seite, auf der eine Deutschlandkarte mit Linkmap ist. Die Links verweisen auf entsprechende Zeilen in einer Tabelle weiter unten auf der Seite, die mit dem <a name="X"> Tag benamt sind.
Nein, das ist völlig unmöglich. 'a' darf weder Kind von 'table' noch von 'tbody' noch von 'tr' sein;
<table>
<a name="foo"></a><tr><td>foo</td></tr>
</table>
ist KEIN gültiges HTML.
Gib stattdessen den Zeilen IDs:
<table>
<tr id="foo"><td>foo</td></tr>
</table>
Ich würde es jetzt aber gerne so einrichten, dass sich immer die zum Link gehörende Zeile der Tabelle verfärbt (Hintergrund gelb), wenn oben der Mauszeiger über den entsprechenden Link fährt.
Also beim 'mouseover'-Event.
Wie kann ich dass erreichen, bzw. wie müsste eine Funktion aussehen, die soetwas kann?
Über 'document.getElementById()' die jeweilige Tabelenzeile ansprechen und über deren 'style'-Objekt die Hintergrundfarbe setzen.
Und nicht vergessen, das bei 'mouseout' wieder rückgängig zu machen.
Live long and prosper,
Gunnar
Gib stattdessen den Zeilen IDs:
<table>
<tr id="foo"><td>foo</td></tr>
</table>
Dessen war ich mir nicht bewusst. Es scheint zulässig zu sein, das <a name="X"> als Text zwischen <td> und </td> zu haben. So habe ich es im Moment realisiert.
> Live long and prosper,
Ich versuche es, danke. Gleichfalls.
Zum Problem:
So wie ich dass verstanden habe, sollte es so gehen. Ich habe den Link definiert:
<area shape="circle" coords="229,145,3" href="#Hamburg" alt="Hamburg" title="Hamburg" onmouseover="Farbwechsel(1,#FFFF00)" onmouseout="Farbwechsel(1,#FFFFFF)>
Die Funktion habe ich dann so gestaltet:
<script type="text/javascript">
function Farbwechsel(nummer,Farbe)
{
document.getElementsByTagName("td")[nummer+0].bgColor = Farbe;
document.getElementsByTagName("td")[nummer+1].bgColor = Farbe;
document.getElementsByTagName("td")[nummer+2].bgColor = Farbe;
}
</script>
Wobei ich glaube, dass ich irgendwo die Parameter noch definieren muss. Eigentlich sollte mit der ID 1 dann die ersten drei Tabellenfelder (was der ersten Zeile entspricht) gefärbt werden. Leider klappt es nicht und irgendwie fehlt mir auch Info zum Debugging.
Würde mich über weitere Hilfe freuen.
Heinrich
@@Heinrich Krebs:
Es scheint zulässig zu sein, das <a name="X"> als Text zwischen <td> und </td> zu haben.
Ja, das ist es. Aber damit ist es ein Anker für eine Tabellen_zelle_, nicht für eine Tabellen_zeile_.
onmouseover="Farbwechsel(1,#FFFF00)"
#FFFF00 soll ein String sein‽
document.getElementsByTagName("td")[nummer+0].bgColor = Farbe;
Verwende besser nicht missbilligte HTML-Attribute ('bgColor') zur Darstellung, sondern CSS-Eigenschaften (wie schon gesagt: übers 'style'-Objekt)!
document.getElementsByTagName("td")[nummer+1].bgColor = Farbe;
Du willst die Tabellen_zeile_ färben. Warum färbst du nicht die Tabellen_zeile_?
Eigentlich sollte mit der ID 1 dann die ersten drei Tabellenfelder (was der ersten Zeile entspricht) gefärbt werden.
ID?? Für nummer = 0 färbst du die Zellen 0, 1 und 2.
Für nummer = 1 färbst du was? Die Zellen 1, 2 und 3 – wohl nicht das, was du willst.
Wie müsste die Berechnung sein, damit die Zellen 3, 4 und 5 gefärbt werden?
Aber wie gesagt: färbe die Tabellen_zeile_!
Leider klappt es nicht und irgendwie fehlt mir auch Info zum Debugging.
Firefox und dessen Fehlerkonsole nutzt du aber schon, oder?
Live long and prosper,
Gunnar
Mahlzeit,
Dessen war ich mir nicht bewusst. Es scheint zulässig zu sein, das <a name="X"> als Text zwischen <td> und </td> zu haben. So habe ich es im Moment realisiert.
Ja. http://de.selfhtml.org/html/referenz/elemente.htm#td@title=DORT darfst Du fast beliebige Kind-Elemente verwenden ...
So wie ich dass verstanden habe, sollte es so gehen. Ich habe den Link definiert:
<area shape="circle" coords="229,145,3" href="#Hamburg" alt="Hamburg" title="Hamburg" onmouseover="Farbwechsel(1,#FFFF00)" onmouseout="Farbwechsel(1,#FFFFFF)>
1. solltest Du die Farbangaben in ' einschließen (schließlich handelt es sich um Strings) und 2. solltest Du das onmouseout-Attribut korrekt mit einem " beenden.
Die Funktion habe ich dann so gestaltet:
<script type="text/javascript">
function Farbwechsel(nummer,Farbe)
{
document.getElementsByTagName("td")[nummer+0].bgColor = Farbe;
document.getElementsByTagName("td")[nummer+1].bgColor = Farbe;
document.getElementsByTagName("td")[nummer+2].bgColor = Farbe;
}
</script>
Kurze Frage: wieso beherzigst Du nicht Gunnars Vorschlag, gibst den Zeilen jeweils eine eigene ID und sprichst sie dann direkt an? Darüber hinaus würde ich Dir empfehlen, den Farbwechsel über die Zuweisung von CSS-Klassen vorzunehmen - so musst Du nur einmal zentral im Stylesheet die Farbinformationen festlegen und pflegen.
Wobei ich glaube, dass ich irgendwo die Parameter noch definieren muss. Eigentlich sollte mit der ID 1 dann die ersten drei Tabellenfelder (was der ersten Zeile entspricht) gefärbt werden. Leider klappt es nicht und irgendwie fehlt mir auch Info zum Debugging.
Lass mich raten: Dein "Browser" hat keine vernünftige Javascript-Fehlerkonsole? Verwende Firefox ...
MfG,
EKKi
Kurze Frage: wieso beherzigst Du nicht Gunnars Vorschlag, gibst den Zeilen jeweils eine eigene ID und sprichst sie dann direkt an? Darüber hinaus würde ich Dir empfehlen, den Farbwechsel über die Zuweisung von CSS-Klassen vorzunehmen - so musst Du nur einmal zentral im Stylesheet die Farbinformationen festlegen und pflegen.
Ich habe das id eingetragen, das der Link dahin spring und ich die <a name=""> nicht mehr brauche hat auch geklappt. Dass ich mit der id auch andere Eigenschaften der Zeile ansprechen kann, war mir so nicht bewusst. Ich habe den Beispielquellcode aus eindem Beispiel genutzt. Dass sich dadurch nur die einzelnen Zellen verfärben war mir schon klar.
Das mit dem Style muss ich mir durchlesen, ich habe sowas bislang noch nie benutzt.
@@EKKi:
Darüber hinaus würde ich Dir empfehlen, den Farbwechsel über die Zuweisung von CSS-Klassen vorzunehmen - so musst Du nur einmal zentral im Stylesheet die Farbinformationen festlegen und pflegen.
Ein völlig berechtigter Einwand.
CSS beschreibt die Präsentation; JavaScript das Verhalten.
Wenn sich später mal die Farbe nicht zu gelb, sondern zu hellblau ändern soll, betrifft das lediglich die Präsention; nicht jedoch das Verhalten. Zur Abänderung von gelb nach hellblau sollte also nicht mehr der JavaScript-Code angefasst werden müssen, sondern allein der CSS-Code.
Also mittels JavaScript einen Klassennamen ändern:
foo.className = "hervorgehoben";
Im Stylesheet mittls Klassenselektor [CSS2 §5.1, CSS2 §5.8.3, SELFHTML] die Hintergrundfarbe setzen [CSS2 §14.2, SELFHTML]:
.hervorgehoben {background-color: yellow;}
Live long and prosper,
Gunnar
Also mittels JavaScript einen Klassennamen ändern:
foo.className = "hervorgehoben";
Gut, ich habe also zwei Funktionen geschrieben:
function Farbwechsel(id)
{
id.className = "hinterlegt";
}
function FarbeReturn(klasse)
{
id.className = "nix";
}
Dies sollte ja dann die Klassennamen ändern, wenn man sie mit der ID der entsprechenden Zeile aufruft, oder nicht ?
.hervorgehoben {background-color: yellow;}
ich habe es entsprechend dem verlinkten Beispiel 'hinterlegt' genannt. Allerdings liefert Firefoxfehler zurück:
"Selektor erwartet. Regelsatz wegen ungültigem Selektor ignoriert."
So wie ich das verstanden habe, sollte doch aber
.hinterlegt {background-color: yellow;}
das selbe sein wie
*.hinterlegt {background-color: yellow;}
und also universell für alles gelten, dass ich 'hinterlegt' nenne, oder nicht?
Ich habe wie gesagt, garkeine Erfahrung mit CSS. Mein .css File enthält auch nur diese Zeilen
<style type="text/css">
.hinterlegt { background-color: yellow; }
</style>
Bin da jetzt wieder etwas am Straucheln, weil es in den Beispielen für mich ganauso aussieht.
Vielen Dank im vorraus.
Heinrich
@@Heinrich Krebs:
Ich habe wie gesagt, garkeine Erfahrung mit CSS. Mein .css File enthält auch nur diese Zeilen
<style type="text/css">
.hinterlegt { background-color: yellow; }
</style>
HTML-Code hat in einer CSS-Datei nichts zu suchen. Weg mit den '<style>'-/
'</style>'-Tags!
Live long and prosper,
Gunnar
--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
HTML-Code hat in einer CSS-Datei nichts zu suchen. Weg mit den '<style>'-/
'</style>'-Tags!
Okay. Dass ist gut. Es funktioniert jetzt auch halbwegs. Es färbt sich gelb. Aber nicht zurück.
Bevor es gelb wird ist das normale Hintergrundbild zu sehen, dass hätte ich auch gerne wieder. Was müsste ich da ins CSS File eintragen?
Vielen Dank.
Heinrich
Mahlzeit,
Bevor es gelb wird ist das normale Hintergrundbild zu sehen, dass hätte ich auch gerne wieder. Was müsste ich da ins CSS File eintragen?
Hast Du beim "onmouseout" auch einen entsprechenden Funktionsaufruf?
MfG,
EKKi
Mahlzeit,
Bevor es gelb wird ist das normale Hintergrundbild zu sehen, dass hätte ich auch gerne wieder. Was müsste ich da ins CSS File eintragen?
Hast Du beim "onmouseout" auch einen entsprechenden Funktionsaufruf?
Ja, den hatte ich. Habe auch das mit dem Hintergrundbild in einem Beispiel gefunden und übertragen. Das klappt jetzt.
Vielen Dank.
@@Heinrich Krebs:
function Farbwechsel(id)
{
id.className = "hinterlegt";
}Dies sollte ja dann die Klassennamen ändern, wenn man sie mit der ID der entsprechenden Zeile aufruft, oder nicht ?
Nein.
Wenn du als 'id' den Zeiger aud das Elementobjekt übergibst, dann ja (d.h. Aufruf mit 'Farbwechsel(document.getElementById("foo"));'; evtl. auch mit 'Farbwechsel(this);').
Vermutlich wolltest du die Funktion aber so implementieren:
function Farbwechsel(id)
{
document.getElementById(id).className = "hinterlegt";
}
function FarbeReturn(klasse)
{
id.className = "nix";
}
'klasse'??
Statt "nix" darf es auch "" sein.
Beide Funktionen lassen sich besser zu einer zusammenfassen.
Eine Benennung sollte nicht an der gegenwärtig gewünschten Darstellung orientieren, sondern nach der Funktion. Und in JavaScript werden Namen von Funktionen (Methoden, Eigenschaften) üblicherweise mit kleinem Anfangsbuchstaben geschrieben.
function hinterlegen(id, flag)
{
if (flag)
document.getElementById(id).className = "hinterlegt";
else
document.getElementById(id).className = "";
}
was sich einfacher so schreiben lässt:
function hinterlegen(id, flag)
{
document.getElementById(id).className = flag ? "hinterlegt" : "";
}
Aufruf mit 'hinterlegen("foo", true)' bzw. 'hinterlegen("foo", false)'.
Falls es überhaupt sinnvoll ist, dafür eine Funktion zu haben. Die Anweisung zum ändern der Klasse könnte ja auch direkt beim Event-Handler stehen.
Live long and prosper,
Gunnar
Ich habe es jetzt mit folgender Syntax eingebunden.
function Farbwechsel(id)
{
id.className = "hinterlegt";
}
Und es klappt. Das es mit einem Flag auch möglich wäre, stimmt wohl. Aber an der Schönheit des Codes kann ich ja jetzt noch feilen.
Vielen vielen Dank.
Gruß,
Heinrich
Vermutlich wolltest du die Funktion aber so implementieren:
function Farbwechsel(id)
{
document.getElementById(id).className = "hinterlegt";
}
Ich habe das probiert, weil es eine Warnung gibt, die mir auch dazu rät es so zu benutzen. Aber jetzt erhalte ich einen Fehler:
document.getElementById(id) has no properties.
Wie kommt das?
@@Heinrich Krebs:
function Farbwechsel(id)
{
document.getElementById(id).className = "hinterlegt";
}
>
> Ich habe das probiert, weil es eine Warnung gibt, die mir auch dazu rät es so zu benutzen.
Warnung?? Benutzt du immer noch den IE? Der legt (fälschlicherweise!!) für ein HTML-Element mit der ID "foo" eine globale Variable foo an. Andere Browser tun dies natürlich nicht; der Code ohne getElementById() dürfte in diesen gar nicht laufen.
> Aber jetzt erhalte ich einen Fehler:
> document.getElementById(id) has no properties.
>
> Wie kommt das?
Vermutlich, weil das Element zum Zeitpunkt des Aufrufs noch nicht existiert. Du darfst wohl irgendwas erst bei 'window.onload' ausführen lassen.
Live long and prosper,
Gunnar
--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
Warnung?? Benutzt du immer noch den IE? Der legt (fälschlicherweise!!) für ein HTML-Element mit der ID "foo" eine globale Variable foo an. Andere Browser tun dies natürlich nicht; der Code ohne getElementById() dürfte in diesen gar nicht laufen.
Ich habe es seit dem Hinweis dass Firefox eine Fehlerkonsole hat mit Firefox 2.0.0.11 getestet.
Der Firefox unterscheidet Warunung (gelbes Dreieck mit Ausrufezeichen) und Fehler (rotes Sechseck mit Ausrufezeichen).
Die Warnung, dass mein Aufruf ohne getElementById() nicht dem Standart entspricht habe ich halt hingenommen. Firefox gibt dafür als Zeilennummer auch Zeile 1 an, was aber eigentlich nur den <html>-Tag enthält, deswegen weiß ich nicht, wo ich überall was ändern muss, damit es klappt.
Ich habe dann eben um die Warnungen zu beseitigen
document.getElementById(id).className = "usw"
geschrieben. Dann kam der Fehler und die Warnung ist dennoch erhalten geblieben.
Vermutlich, weil das Element zum Zeitpunkt des Aufrufs noch nicht existiert. Du darfst wohl irgendwas erst bei 'window.onload' ausführen lassen.
Naja, das Fenster muss ja geladen sein, sonst würden die mouseover-Events nicht ausgelöst, oder?
Es tauchen im Fehlerfenster von Firefox immer neue Fehler auf, immer wenn ich die Maus auf oder von einem der Links wegbewege, also immer wenn die Funktionen aufgerufen werden.
@@Heinrich Krebs:
Ein Überblick über das Ganze wäre wohl nötig. Link zur Seite?
Live long and prosper,
Gunnar
@@Heinrich Krebs:
Ein Überblick über das Ganze wäre wohl nötig. Link zur Seite?
Gern:
http://www.werwolf-live.de/welt.html
Mahlzeit,
Wie kann ich dass erreichen, bzw. wie müsste eine Funktion aussehen, die soetwas kann?
Sichworte http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onMouseOver, http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout@title=onMouseOut, http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() und http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className ...
MfG,
EKKi
Sichworte http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onMouseOver, http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout@title=onMouseOut,
nur damit keine Mißverständnisse aufkommen, die Maushandler werden niemals so geschrieben, im zweifelsfall müssen sie komplett kleingeschrieben werden (z.b. in JS), in manchen HTML Varianten ist es aber egal dort dürfen die Attributbezeichnungen klein und Groß geschrieben werden.
Struppi.
Mahlzeit,
nur damit keine Mißverständnisse aufkommen, die Maushandler werden niemals so geschrieben, im zweifelsfall müssen sie komplett kleingeschrieben werden (z.b. in JS), in manchen HTML Varianten ist es aber egal dort dürfen die Attributbezeichnungen klein und Groß geschrieben werden.
Hm, OK. Hast recht. Werde versuchen, sie in Zukunft immer klein zu schreiben ... :-)
MfG,
EKKi