Linearer Modus

26.05.2010 17:59

Hallihallo,

ich bin ja noch ein blutiger Anfänger in Sachen Javascript (ich kenn's jetzt seit 3 Tagen) und habe ein paar nette Effekte mit Hilfe eines Fading-Skriptes (ausm Netz) erzeugt (s. Google Pac-Man Doodle Mods).
Damit habe ich noch zwei Probleme:
Wenn man ein Spiel-Thumbnail in der Tabelle anklickt, soll die Tabelle im Hintergrund einmal weiß aufpulsieren. Das tut sie auch, aber nicht, wenn man erneut auf die Tabelle klickt, sondern nur beim ersten Klick. Liegt das am fader-Skript oder an meinem Code (s. unten)?

Zweites Problem: Kann man diesen Code vereinfachen? Die onmouseover und onmouseout Ereignisse sehen doch recht spammig aus. Ist es möglich, die für alle td's festzulegen (ich denke da an so etwas wie bei CSS)?

Hier der besagte Spaghetti-Code, fader.cs findet man hier: http://www.leigeber.com/2008/05/javascri...ng-script/.

Code:

<head>

    <link rel="STYLESHEET" href="style.css" type="text/css">

    <script type="text/javascript" src="fader.js"></script>

</head>

<table id="games" onclick="colorFade('games','background','FFFFFF','333333',25,50)">

    <tr>

        <td id="pacgoogle" onmouseover="colorFade('pacgoogle','background','333333','888888')" onmouseout="colorFade('pacgoogle','background','888888','333333',25,50)"><a href="pacgoogle/index.html" target="game"><img src="pacgoogle/thumb.png"/></a></td>

        <td id="pacplus" onmouseover="colorFade('pacplus','background','333333','888888')" onmouseout="colorFade('pacplus','background','888888','333333',25,50)"><a href="pacplus/index.html" target="game"><img src="pacplus/thumb.png"/></a></td>

        <td id="pachell" onmouseover="colorFade('pachell','background','333333','888888')" onmouseout="colorFade('pachell','background','888888','333333',25,50)"><a href="pachell/index.html" target="game"><img src="pachell/thumb.png"/></a></td>

    </tr>

    <tr>

        <td id="pacman" onmouseover="colorFade('pacman','background','333333','888888')" onmouseout="colorFade('pacman','background','888888','333333',25,50)"><a href="pacman/index.html" target="game"><img src="pacman/thumb.png"/></a></td>

        <td id="pacmario" onmouseover="colorFade('pacmario','background','333333','888888')" onmouseout="colorFade('pacmario','background','888888','333333',25,50)"><a href="pacmario/index.html" target="game"><img src="pacmario/thumb.png"/></a></td>

        <td></td>

    </tr>

</table>

niwax · 28.05.2010 21:32

Guter Tipp: nimm das script.acolo.us-Skript und Prototype Lite. Das ist zusammen zwar recht groß (zwischen 15 und 300kb, je nach Umfang), aber kann so ziemlich alles.

Dirk · 29.05.2010 08:58

ohne reinzuschauen: evtl. ist nen fehler im ereignis, worauf der ganze code dann als falsch gesehen wird. ich teste sowas immer im ffx, unter extras gibts ne fehlerkonsole. primitiv, aber effektiv.

29.05.2010 10:08

Das Skript gucke ich mir nochmal an... aber erwarte nicht zu viel von mir, ich kann JS nicht wirklich

Dirk: Also Fehler sind auf jeden Fall drin, aber gleich in Zeile 1?

Zitat:Fehler: syntax error
Quelldatei: j%20http://kartwiki.cwsurf.de/other/pacman/select.html
Zeile: 1, Spalte: 50
Quelltext:
http://kartwiki.cwsurf.de/other/pacman/select.html

So sehen die ersten Zeilen aus, sollte man eigentlich den HTML-Tag noch verwenden?

Code:

<head>

    <link rel="STYLESHEET" href="style.css" type="text/css">

    <script type="text/javascript" src="fader.js"></script>

</head>

gandro · 29.05.2010 10:38

@niwax: Nur noch mehr JS-Libs darüberpappen macht die Sache ganz sicher nicht funktionaler.

@Topic:
Bezüglich: Funktioniert nur einmal:

Problem ist folgendes: Wie du siehst, wird die Funktion jeweils immer paarweise verwendet: Bei onmouseover und onmouseout.

Schaust du dir das Script an, dann siehst du, dass es dem Element selber Werte zuweist, also die Farbwerte zwischenspeichert (z.B. taget.r). Bei einem Aufruf mit anderen Farben ist das kein Problem, weil es zu einer anderen Farbe faden muss, bei einem Aufruf mit gleichen Farben sieht er die Arbeit als bereits erledigt an, und macht gar nix mehr.

Eine Möglichkeit wäre es, die if-Abfrage in Zeile 12 zu entfernen, dann funktioniert das auch mit onclick, allerdings siehts dann bei onmouseout scheisse aus, wenn du das Feld wieder zu früh verlässt, weil er da auch den Wert zurücksetzt.

Die imho elegantere Lösung (weil sie das Script in Ruhe lässt) ist es, onclick ebenfalls auf zwei Events aufzusplitten: onmousedown und onmouseup, z.B:

onmousedown="colorFade('games','background','FFFFFF','333333',25,50)" onmouseup="colorFade('games','background','333333','000000',25,50)"

Bezüglich: Codeaufräumen:

Du kannst die Event-Handler auch mit JavaScript selber setzen lassen, z.B:

document.getElementById("pacgoogle").onmouseout = function() { colorFade(this.id,'background','888888','333333',25,50); };

Und das kannst du ja dann in eine for/foreach-Schleife packen, wo du das für alle IDs machst.

Dirk · 29.05.2010 11:00

wegen fehlerkonsole: die zeigt auch noch alte fehler, ergo andere seiten. immer erst den verlauf da löschen.

gandro · 29.05.2010 11:06

Ja, es ist kein JS-Fehler der für onclick-Fail verantwortlich ist, wie ich oben erläutert habe.

30.05.2010 00:19

Also das mit dem onmousedown und onmouseup bekomme ich trotzdem nicht zum Laufen

Meinst du das so?

Code:

<table id="games" onmousedown="colorFade('games','background','FFFFFF','333333',25,50)" onmouseup="colorFade('games','background','333333','000000',25,50)">

Das mit dem Aufräumen habe ich prinzipiell verstanden, aber wie formuliere ich in Javascript eine Schleife, bei der ich die Elemente durchgehe und auch nur die mit Events versehe, die mit pac* anfangen (oder die td's sind)?

gandro · 30.05.2010 11:03

Hm.. der Code funktioniert bei mir nur bei jedem zweiten Klick.. (reagieren tut er jedes mal, aber die Farbe ändert sich praktisch kaum).. lustig. Aber hat mit dem Script zu tun, auch wenn ich jetzt nicht genau herausfinden will, woran.

Elemente kannst du via DOM durchackern:
SELFHTML: JavaScript / Objektreferenz / document
SELFHTML: JavaScript / Objektreferenz / node

Wobei du für onclick eh das Script ja noch anpassen musst. Für beides brauchst du dann doch etwas Kenntnisse von Javascript (eine Sprache, von der jeder meint, dass er sie ansatzweise kann, doch im Detail hat die Sprache einiges mehr).

Von daher, wenn du nicht gewillt bist dich in JS/DOM einzuarbeiten, schau dir ggf. mal JQuery an, für deine Zwecke wohl passender als die oben genannten Prototype oder Scriptaculous, weil eine sehr tolle und einfache API zum Elementen zu selektieren: Why does everyone like jQuery more than prototype/script.aculo.us or mootools or whatever? - Stack Overflow

jQuery hat auch nen Fader, das heisst du kriegst deine Wünsche mit 2-3 Zeilen jQuery-Aufrufen hin.

Nachtrag: Ich sehe gerade, jQuery kann so einfach nicht Farben faden, nur Transparenz. Das wird aufwändiger.

niwax · 31.05.2010 16:58

So sehen die ersten Zeilen aus, sollte man eigentlich den HTML-Tag noch verwenden?

Code:

<head>

    <link rel="STYLESHEET" href="style.css" type="text/css">

    <script type="text/javascript" src="fader.js"></script>

</head>

[/quote]
Welchen Tag würdest du sonst nehmen? Tipp: Stell auf XHTML-Strict um, dann ists leichter zu entscheiden, was reinsoll und was nicht.
@Dirk: Die Webdeveloper Toolbar ist noch besser als n ur die Fehlerkonsole, wenn die keine Fehler meldet, dann stimmt (fast) alles