nicht angemeldet
Gunnar Bittersmann
JürgenB
JürgenB
JürgenB
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
Hallo! Ich versuche, beim OnMouseOver eines Links die Style-Eigenschaften anderer Elemente zu verändern, allerdings funktioniert dies nicht wie gewollt:
HTML:
<div style="width:100%;">
<a href="#" onmouseover="javascript:contentchange(2008,2009,2010);"><h3>2008</h3></a>
<a href="#" onmouseover="javascript:contentchange(2009,2008,2010);"><h3>2009</h3></a>
<a href="#" onmouseover="javascript:contentchange(2010,2008,2009);"><h3>2010</h3></a>
<div style="background-color:white;visibility:hidden;" id="2008">
Foo
</div>
<div style="background-color:white;visibility:hidden;" id="2009">
Bar
</div>
<div style="background-color:white;visibility:hidden;" id="2010">
Lorem Ipsum
</div>
</div>
Javascript:
function contentchange(container1,container2,container3) {
document.getElementByID(container1).style.backgroundColor='#ff6600';
document.getElementByID(container1).style.backgroundColor='#ff6600';
document.getElementByID(container1).style.visibility='visible';
document.getElementByID(container2).style.backgroundColor='##ffffff';
document.getElementByID(container2).style.backgroundColor='#ffffff';
document.getElementByID(container2).style.visibility='hidden';
document.getElementByID(container3).style.backgroundColor='##ffffff';
document.getElementByID(container3).style.backgroundColor='#ffffff';
document.getElementByID(container3).style.visibility='hidden';
}
Leider bin ich blutiger Anfänger in Sachen Javascript. Was mache ich falsch?
Beim Hovern der Links passiert leider nichts.
Liebe Grüße,
Jeremy.
@@Jeremy:
nuqneH
Was mache ich falsch?
Du verwendest ungültige ID-Bezeichner. [in HTML401 §6.2]
Qapla'
@@Gunnar Bittersmann
Du verwendest ungültige ID-Bezeichner. [in HTML401 §6.2]
nuqneH! ;)
Vielen Dank für deine Antwort. Habe nun die ID in zwo8 und analog verändert. Trotzdem funktioniert das Script nicht. Ideen?
Im Praxistest zu sehen unter http://www.spielmannszugratzeburg.de/media.php?cont=pic
Liebe Grüße
Jeremy.
Hallo Jeremy,
<a href="#" onmouseover="javascript:contentchange(zwo8,zwo9,zwo10);"><h3>2008</h3></a>
zwo8 ist in diesem Zusammenhang eine Variable, du benötigst aber einen String:
<a href="#" onmouseover="javascript:contentchange("zwo8","zwo9","zwo10");"><h3>2008</h3></a>
Außerdem musst du dich unbedingt kundig machen, wo du bei deinem Browser die Fehlerkonsole findest. Im FF z.B. unter Extras.
Gruß, Jürgen
Hallo Jeremy,
Hallo Jürgen!
Außerdem musst du dich unbedingt kundig machen, wo du bei deinem Browser die Fehlerkonsole findest. Im FF z.B. unter Extras.
Hui, damit hast du die Frage beantwortet, die ich mir schon desöfteren gestellt habe. ;) Vielen Dank!
Hallo,
Ich versuche, beim OnMouseOver eines Links die Style-Eigenschaften anderer Elemente zu verändern [...]
Einfacher und performanter dürfte es sein, nicht jede CSS-Eigenschaft einzeln zu setzen, sondern einfach die "class" des Elements zu ändern.
<a href="#" onmouseover="javascript:contentchange(2008,2009,2010);"><h3>2008</h3></a>
In einem Eventhandler solltest du "javascript:" weg lassen.
document.getElementByID(container2).style.backgroundColor='##ffffff';
Hier ist ein "#" zu viel
Gruß
Ole
Einfacher und performanter dürfte es sein, nicht jede CSS-Eigenschaft einzeln zu setzen, sondern einfach die "class" des Elements zu ändern.
Stimmt! Das habe ich nicht bedacht!
Hierfür wäre
document.getElementByID('ID').className = 'foobar';
korrekt, oder?
<a href="#" onmouseover="javascript:contentchange(2008,2009,2010);"><h3>2008</h3></a>
>
> In einem Eventhandler solltest du "javascript:" weg lassen.
Achso. In meiner Vorlage wurde das "javascript:" mitgeschrieben. Dann werde ich das mal raus nehmen.
> ~~~javascript
> document.getElementByID(container2).style.backgroundColor='##ffffff';
>
Hier ist ein "#" zu viel
Hups! Flüchtigkeitsfehler :-/
Vielen Dank für deine Antwort, Jeremy.
Hallo Jeremy,
zusätzlich zu dem schon angemerkten:
function contentchange(container1,container2,container3) {
document.getElementByID(container1).style.backgroundColor='#ff6600';
document.getElementByID(container1).style.backgroundColor='#ff6600';
einmal recht.
document.getElementByID(container1).style.visibility='visible';
document.getElementByID(container2).style.backgroundColor='##ffffff';
document.getElementByID(container2).style.backgroundColor='#ffffff';
überflüssig, da das Element ja versteckt wird.
document.getElementByID(container2).style.visibility='hidden';
document.getElementByID(container3).style.backgroundColor='##ffffff';
document.getElementByID(container3).style.backgroundColor='#ffffff';
s. o.
document.getElementByID(container3).style.visibility='hidden';
}
Gruß, Jürgen
Hallo!
Habe jetzt alle Schönheitskorrekturen vorgenommen und im Eventhandler das "javascript:" entfernt. Trotzdem funktioniert nichts. :(
Vielen Dank für deinen Ratschlag.
Hallo,
Trotzdem funktioniert nichts. :(
Klar, schau dir mal die Anführungzeichen an:
onmouseover="contentchange("zwo8","zwo9","zwo10");"
^ ^ ^ ^ ^ ^ ^ ^
hinweis = "Die Anführungszeichen 'innerhalb' von Strings dürfen nicht die gleichen sein wie außen oder müssen \"escaped\" werden.";
Gruß, Don P
Hallo!
hinweis = "Die Anführungszeichen 'innerhalb' von Strings dürfen nicht die gleichen sein wie außen oder müssen "escaped" werden.";
Das hat mich am obigen Tipp auch schon gewundert, nur dachte ich, dass das wohl in Ordnung sei, da so geschrieben. Einfache Anführungszeichen dürften in diesem Fall aber auch der Sache gerecht werden, oder?
Liebe Grüße.
Hallo,
Einfache Anführungszeichen dürften in diesem Fall aber auch der Sache gerecht werden, oder?
hinweis1 = "Anführungszeichen 'innerhalb eines Strings' dürfen nicht die gleichen sein wie außen oder müssen \"escaped\" werden.";
hinweis2 = 'Anführungszeichen "innerhalb eines Strings" dürfen nicht die gleichen sein wie außen oder müssen \'escaped\' werden.';
Gruß, Don P
Hallo Jeremy,
... Anführungszeichen ...
... da so geschrieben. ...
sorry, nicht aufgepasst.
Gruß, Jürgen
Mahlzeit Jeremy,
Leider bin ich blutiger Anfänger in Sachen Javascript. Was mache ich falsch?
Einiges:
[code lang=html]<div style="width:100%;">
<a href="#" onmouseover="javascript:contentchange(2008,2009,2010);"><h3>2008</h3></a>
<a href="#" onmouseover="javascript:contentchange(2009,2008,2010);"><h3>2009</h3></a>
<a href="#" onmouseover="javascript:contentchange(2010,2008,2009);"><h3>2010</h3></a>
Das sieht wie eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste aus. Zeiche sie also auch als solche aus.
Darüber hinaus handelt es sich ganz offensichtlich *nicht* um Links (da sie nirgendwohin verlinken). Eliminiere also die <a>-Elemente und nutze stattdessen passendere (wenn Du eine Liste benutzt, hast Du ja schon welche: <li>).
<div style="background-color:white;visibility:hidden;" id="2008">
IDs dürfen nicht rein numerisch sein.
function contentchange(container1,container2,container3) {
document.getElementByID(container1).style.backgroundColor='#ff6600';
Das Objekt "document" kennt keine solche Methode. Meinst Du stattdessen http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById()? Merke: Javascript legt Wert auf korrekte Groß- und Kleinschreibung!
document.getElementByID(container2).style.backgroundColor='##ffffff';
Was erwartest Du von derart falschen http://de.selfhtml.org/html/allgemein/farben.htm@title=Farbangaben?
MfG,
EKKi
Hallo!
Das sieht wie eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste aus. Zeiche sie also auch als solche aus.
Darüber hinaus handelt es sich ganz offensichtlich *nicht* um Links (da sie nirgendwohin verlinken). Eliminiere also die <a>-Elemente und nutze stattdessen passendere (wenn Du eine Liste benutzt, hast Du ja schon welche: <li>).
Dies wäre im Laufe der letzten Anpassung zum produktiven Einsatz ohnehin noch verändert worden. Zurzeit bin ich sozusagen in der Testphase. ;)
<div style="background-color:white;visibility:hidden;" id="2008">
IDs dürfen nicht rein numerisch sein.
Habe ich vergessen, wurde allerdings schon geändert.
function contentchange(container1,container2,container3) {
document.getElementByID(container1).style.backgroundColor='#ff6600';
Das Objekt "document" kennt keine solche Methode. Meinst Du stattdessen http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById()? Merke: Javascript legt Wert auf korrekte Groß- und Kleinschreibung!
"Das könnte der Fehler gewesen sein", dachte ich mir, als ich diesen Ratschlag las. War er aber nicht. Das Script funktioniert weiterhin nicht. :(
document.getElementByID(container2).style.backgroundColor='##ffffff';
Was erwartest Du von derart falschen http://de.selfhtml.org/html/allgemein/farben.htm@title=Farbangaben?
Ein typischer Tippfehler, der auch schon ausgemerzt wurde.
Vielen Dank für deine Antwort. :)
Mahlzeit Jeremy,
Darüber hinaus handelt es sich ganz offensichtlich *nicht* um Links (da sie nirgendwohin verlinken). Eliminiere also die <a>-Elemente und nutze stattdessen passendere (wenn Du eine Liste benutzt, hast Du ja schon welche: <li>).
Dies wäre im Laufe der letzten Anpassung zum produktiven Einsatz ohnehin noch verändert worden. Zurzeit bin ich sozusagen in der Testphase. ;)
Auch auf die Gefahr hin, dass Du das jetzt in den falschen Hals bekommst: eine lahmere Ausrede gibt's in diesem Zusammenhang wirklich nicht.
Die Erfahrung zeigt eindeutlich, dass Dinge, die "nur mal kurz zum Testen", "ausschließlich als Übergangslösung" oder "höchstens während der Entwicklung" irgendwo eingebaut werden, in nahezu 99% aller Fälle in irgendeiner Form ihren Weg in die Endfassung finden.
Es ist *immer* sinnvoll, gleich von Beginn korrekten Code zu schreiben/die Struktur sinnvoll aufzubauen/was auch immer - dann muss man kurz vor der Endphase des Projekts (wo man in der Regel ungefähr gar keine Zeit mehr für Schnicki-schnacki hat) nämlich nicht mehr diese ganzen Provisorien entfernen.
"Das könnte der Fehler gewesen sein", dachte ich mir, als ich diesen Ratschlag las. War er aber nicht. Das Script funktioniert weiterhin nicht. :(
"Funktioniert nicht" funktioniert nicht. *Was genau* funktioniert nicht? Du wurdest auf die Fehlerkonsole hingewiesen: was meldet diese?
Hellseher und sonstige Glaskugelbediener sind hier im Forum eher selten anzutreffen ... :-)
MfG,
EKKi
Hallo,
Die Erfahrung zeigt eindeutlich, dass Dinge, die "nur mal kurz zum Testen", "ausschließlich als Übergangslösung" oder "höchstens während der Entwicklung" irgendwo eingebaut werden, in nahezu 99% aller Fälle in irgendeiner Form ihren Weg in die Endfassung finden.
ja, das kann ich nur bestätigen. "Nichts ist so dauerhaft wie ein Provisorium" ist nicht nur eine Redensart - das ist bittere Wirklichkeit!
Ciao,
Martin
@@EKKi:
nuqneH
IDs dürfen nicht rein numerisch sein.
Hm, das liest sich so als wäre "111einself" ein gültiger Bezeichner.
Qapla'
Noch mal allgemeines Feedback:
Nach euren zahlreichen Tipps und Tricks war es mir möglich, den Quelltext so anzupassen, dass das Javascript funktioniert.
Vielen Dank! Im Anschluss werde ich den nun korrekten Code anfügen - als Lernbeispiel, falls jemand ähnlich doof sein sollte wie ich. ;)
Liebe Grüße, Jeremy.
<div style="width:100%;">
<ul>
<li onmouseover="contentchange('zwo8','zwo9','zwo10');">2008</li>
<li onmouseover="contentchange('zwo9','zwo8','zwo10');">2009</li>
<li onmouseover="contentchange('zwo10','zwo8','zwo9');">2010</li>
</ul>
<div style="background-color:#ff6600;visibility:hidden;" id="zwo8">
Foo
</div>
<div style="background-color:#ff6600;visibility:hidden;" id="zwo9">
Bar
</div>
<div style="background-color:#ff6600;visibility:hidden;" id="zwo10">
Lorem Ipsum
</div>
</div>
<script type="text/javascript">
function contentchange(container1,container2,container3) {
document.getElementById(container1).style.visibility='visible';
document.getElementById(container2).style.visibility='hidden';
document.getElementById(container3).style.visibility='hidden';
}
</script>
Meine Fehler waren also:
Vielen Dank an alle helfenden Hände! :)
PS: optional können für die Container auch 2 CSS-Klassen "active" und "usual" angelegt werden, welche dann per
document.getElementById(ID).className = 'active'
gewechselt werden können.
Du kannst es noch einfacher gestalten, beim mouseover blendest du prinzipiell alle aus nur nur das eine gewünschte wieder ein.
Bei deiner aktuellen Lösung hast du ein Hardlimit von drei Elementen, brauchst du ein viertes, musst du deine Funktion erweitern - das ist uncool.
Hallo,
Noch mal allgemeines Feedback:
und vielen Dank dafür. Das zeigt, dass die Hilfe angekommen ist, und gibt den Helfenden Motivation.
Meine Fehler waren also:
- Bezeichnung eine List-Items als Link,
- ungültige ID,
- vergessene Anführungszeichen in den Parametern der Funktion,
- Missachtung von Groß- und Kleinschreibung bei document.getElementById(),
Ja, wobei man über den ersten Punkt noch diskutieren könnte. Es wäre aus rein technischer Sicht kein Fehler; es ist eher so, als würdest du eine 19er-Sechskantmutter mit einer Kombizange festdrehen. Das ist natürlich möglich, "macht man aber nicht", weil es eine besser geeignete Möglichkeit gibt.
Die letzten beiden Punkte (sorry, ich hab umsortiert) ...
- Benutzung von "javascript:" im Eventhandler onmouseover,
- überflüssige Farbgebungen im Style der Div-Elemente.
... sind keine Fehler im eigentlichen Sinn. Nicht falsch, sondern nur ineffizient; überflüssig, aber auch nicht schädlich.
PS: optional können für die Container auch 2 CSS-Klassen "active" und "usual" angelegt werden, ...
Eine reicht doch. Die ist entweder gesetzt oder nicht.
So long,
Martin
@@Jeremy:
nuqneH
Vielen Dank! Im Anschluss werde ich den nun korrekten Code anfügen - als Lernbeispiel, falls jemand ähnlich doof sein sollte wie ich. ;)
Das war ein guter Zug von dir.
Aber es gibt noch einiges mehr zu lernen.
PS: optional können für die Container auch 2 CSS-Klassen "active" und "usual" angelegt werden, welche dann per
document.getElementById(ID).className = 'active'
> gewechselt werden können.
Das wäre eine Verbesserung. Keine Werte per style-Objekt ändern, sondern saubere Trennung: JavaScript steuert die Programmlogik, CSS die damit verbundene veränderte Ausgabe. Schlag nach bei [[Cheatah](http://community.de.selfhtml.org/zitatesammlung/zitat1940)].
Eine weitere Verbesserung wäre die Trennung von HTML und JavaScript: keine @onmouseover-Attribute im Markup, sondern Registrierung der Eventhandler im JavaScript. Schlag nach bei [[molily1](http://molily.de/js/event-handling-grundlagen.html)].
Und auch nicht mehrere Eventhandler (einen für jedes 'li'-Element), sondern einen fürs 'ul'-Element und Event-Delegation. Schlag nach bei [[molily2](http://molily.de/js/event-handling-effizient.html)].
Der nächste Schritt nach der Verbesserung des JavaScript-Codes könnte dessen Entsorgung sein, denn der Effekt lässt sich auch mit CSS allein realisieren:
Markup:
~~~html
<ul id="yearsgoby">
<li>2008
<div>Foo</div>
</li>
<li>2009
<div>Bar</div>
</li>
<li>2010
<div>Lorem ipsum</div>
</li>
</ul>
Stylesheet:
#yearsgoby div
{
display: none;
}
#yearsgoby li:hover div
{
display: block;
position: absolute;
left: 42px;
top: 42px;
}
Qapla'
Hallo!
Der nächste Schritt nach der Verbesserung des JavaScript-Codes könnte dessen Entsorgung sein, denn der Effekt lässt sich auch mit CSS allein realisieren:
Auch eine sehr gute Idee, auf die ich leider nicht gekommen bin, jetzt aber umgesetzt habe, nachdem ich mir die von dir verlinkten Artikel durchgelesen habe.
Doch leider parst der Firefox den Code falsch (oder richtig?): im Firefox gilt der kleine "Spalt" (1 Pixel) zwischen List-Item und Div-Container als nicht zum <li> gehörendes Element. -> wenn man nicht schnell genug die Maus vom z.B. "2009" in das dazugehörige Div zieht, wird dieser wieder unsichtbar.
Im Internet Explorer funktioniert es trotz des Spalts - der such übrigens durch
border-bottom: 1px solid black;
leicht eliminieren lässt. Aber auch dies hilft dem Firefox nicht auf die Sprünge.
Habe nun schon mit der Positionierung des Div-Containers gekämpft, aber diese würde sich auf anderen Systemen unter Umständen ja ändern.
Hat jemand eine Idee?