Blinkende Links

[BlackPanther]

Liebe Forengemeinde,

nach laaaangem Ringen bin ich nun endlich dabei, meine alte Website auf Joomla! umzustellen.
[sentimental]Tut schon weh, wenn man alles von Grund auf über Jahre hinweg selbst geschrieben hat und das dann einfach so "wegwirft" ... [/sentimental]

Dabei möchte ich auch einen von mir damals selbstgestrickten Effekt übernehmen:
Beim Überfahren von Links beginnen diese rot zu blinken ... besser gesagt zu glühen. Die Farbe wechselt ständig zwischen rot und schwarz ... selbstverständlich übergeblendet.

Das Einbinden in das Joomla!-Template ist kein Problem, das Anpassen des Codes auch nicht. Ebenso die Vergabe der eindeutigen IDs für die Links.
An der Zuweisung der onMouseOver-, onMouseOut- und onClick-Events scheitere ich aber ...

Hier ist mein Code:

Code: Alles auswählen

var linkID;
var linkTime = new Date().getTime();
for (var linkNum = 0; linkNum < document.links.length; linkNum++)
{
  var linkObj = document.links[linkNum];
  if (linkObj.id == '')
  {
    linkID = 'id_' + linkTime + '_' + linkNum;
    linkObj.id = linkID;
    linkObj.onmouseover = function(event) { StartBlink(linkID); };
    linkObj.onmouseout = function(event) { StopBlink(linkID); };
    linkObj.onclick = function(event) { StopBlink(linkID); };
  }
}

Egal welchen Link ich überfahre, immer der letzte auf der Seite beginnt zu blinken!?
Ich kann mich noch erinnern, dass ich dieses Problem so ähnlich damals bereits hatte: Es lag an doppelt, bzw. falsch vergebenen IDs. Dieses Mal sollte aber alles stimmen!

Hat jemand eine Idee, was da los ist? Ich suche mir bereits die Finger wund ...

Danke und viele Grüße,
BP

[Guillermo]

Hi BlackPanther,

ehrlich gesagt finde ich keine Fehler, die IDs werden korrekt erstellt und zugewiesen. Es könnte aber sein dass es da ein Problem mit der Funktionszuweisung gibt. Vielleicht wird nur eine Referenz der zugewiesenen Funktion erstellt, und allen zugewiesen, d.h. alle fuehren genau die gleiche Funktion aus, wobei die linkID eben die letzte ID is, weil die Funktion da zum letzten mal geändert wurde. Abhilfe könntest du vermutlich schaffen wenn du in jeder Schleifeniteration eine neue Funktion erstellst, z.B. mit

Code: Alles auswählen

linkobj.onmouseover = new Function("nameDerFunktion", "StartBlink('"+linkID+"');");


Zum Nachlesen : http://de.selfhtml.org/javascript/objekte/function.htm

Viele Grüße,
Guillermo

[BlackPanther]

Uuuuups ... das wars!
Danke dir! Manchmal ist man wie vernagelt und sieht die einfachsten Dinge nicht (mehr)

BP

[Guillermo]

Das mit den Referenzen is halt bissl verzwickt In manchen Sprachen wird bei folgendem

Code: Alles auswählen

string1 = "Hallo Welt";
string2 = "Hallo Welt";


der String "Hallo Welt" nur einmal in den Speicher geschrieben und dann zeigen string1 und string2 auf die gleiche Speicherstelle, wenn du dann was aenderst wundert man sich warum beide geändert werden :D

[BlackPanther]

OK, Leute. Hier der zweite Streich:

Wenn ein Link bereits ein onClick-Event besitzt, dann kann ich das nicht einfach überschreiben, da ja sonst die ursprüngliche(n) Funktion(en) nicht mehr aufgreufen wird/werden.
Ich muss meinen "Eigenbau" also anhängen.

Gedacht habe ich mir das so:

Code: Alles auswählen

linkObj.onclick = new function () { linkObj.onclick; new Function("event3", "StopBlink('" + linkID + "');"); };

Tut aber leider nicht.

Hat wer ne Idee??

Danke schonmal,
BP

[Guillermo]

Hey BlackPanther,

so wie du das machst wird das nicht gehen. Die Anweisung linkObj.onclick ist eine Referenz auf das onclick Event selbst dass du überschreibst, d.h. wenn das funktionieren würde (Ich vermute dass ein Aufruf linkObj.onclick so garnicht funktionieren würde), würde die Funktion sich selbst aufrufen -> Endlosrekursion.
Es gibt da eine schöne Variante: Die Funktion addEventListener. Du kannst damit so viele EventsListener zu einem Objekt hinzufügen wie du willst, es gibt aber keine Spezifikation in welcher Reihenfolge die Events abgearbeitet werden!
Bei dir könnte das so aussehen:

Code: Alles auswählen

        link.addEventListener('click', function(e) {
            alert("1");
         }, true);
         
         link.addEventListener('click', function(e) {
            alert("2");
         }, true);


Viele Grüße,
Guillermo

[BlackPanther]

Über die Funktion bin ich bei meinen Recherchen auch gestolpert, habe aber irgendwo von Inkompatibilitäten im Zusammenhang mit dem IE 5 (?) oder so gelesen ...

Stimmt das, oder sollte ich mir darüber keine Gedanken machen?

Grüße,
BP

[Guillermo]

Das stimmt wohl leider, sowohl beim IE5 also auch IE6. (Quelle: http://www.quirksmode.org/dom/w3c_event ... gistration)
Der IE5 wird eigentlich nicht mehr verwendet, der IE6 hingegen aber schon noch, von momentan ca. 0.008 % der Internetnutzer (Quelle: http://www.browser-statistik.de/).

[BlackPanther]

Somit zurück zum Thema:
Workaround oder ist das vernachlässigbar?

Gute Frage, gell?

Grüße,
BP

[Guillermo]

Die Frage muss wohl jeder für sich selbst beantworten. Ich persönlich bin der Meinung dass der Anteil verschwindend gering ist. Es kommt aber auch deine Zielgruppe an, viele Unternehmen verwenden noch den IE6. Der IE6 Anteil bei z.B. "älteren" Menschen ist größer als der durchschnittliche.

[BlackPanther]

Hmmmm ... ich hätte die Zahlen jetzt nicht so parat gehabt, aber prinzipiell ist das klar, ja.
Es bleibt also nur der/das (?) Workaround (den/das ich im Übrigen ja versucht habe ).

Hättest du einen Vorschlag?

Grüße,
BP

[Guillermo]

Vielleicht kann man das gesamte erste Event in eine Funktion kopieren und dann ein neues Event hinzufügen indem diese gespeicherte Funktion aufgerufen wird. Das ähnelt deinem Ansatz, nur anders / richtig umgesetzt.

[my-webdesigner.com]

Ein kleiner Hinweis am Rande: Mit Hilfe von CSS3 sind "Blinkeffekte" auch gänzlich ohne JavaScript, einfacher und zudem extrem Ressourcen schonend möglich*.
Das Stichwort dazu lautet "CSS-Transitions".
Optional - quasi als Trigger - kann das Zufügen/Entziehen einer CSS-Class verwendet werden (das wäre dann "minimales" JS).

Falls Interesse besteht, kann ich euch auch gerne ein Codebeispiel tippen.

Grüße

*) Einziges Manko: Ältere Browser blinken dann eben nicht. Aber was solls - das ist keine notwendige Funktionalität

[BlackPanther]

@Guillermo:
Deshalb hatte ich es so versucht
Da ich eigentlich vom Pascal-Sektor komme, dachte ich, dass es so gehen müsste. Dem ist ja offensichtlich nicht so. Und WIE geht es nun richtig?

@my-webdesigner.com:
Ich denke du meinst mit "Blinken" tatsächlich echtes blinken, also an-aus-an-aus-...
Ich meinte damit ein Pulsieren. Also dunkel-heller-noch heller-viel heller-ganz hell-hell-etwas dunkler-viel dunkler-...
Und das eben über die RGB-Eigenschaft gesteuert. Das tut ja auch. Die Frage ist eben nur, wie ich das Event einem Objekt hinzufüge, das bereits ein Event besitzt.
[OT]Ein Code-Besipiel würde mich aber dennoch interessieren.[/OT]

Grüße,
BP

[my-webdesigner.com]

Ich meinte damit ein Pulsieren.

Das meine ich auch. Ein schlichtes An-Aus (Blinken) wäre ohnehin anno 1998

Sieh dir doch mal CSS-Animations an - es ist haar genau, was du suchst, nur eben ohne JS. Und wirklich super simpel.

CSS:

Code: Alles auswählen

@-webkit-keyframes blink {
   from { color: #f00; }
   to   { color: #6a0; }
}
@-moz-keyframes blink {
   from { color: #f00; }
   to   { color: #6a0; }
}
@keyframes blink {
   from { color: #f00; }
   to   { color: #6a0; }
}

.blink {
   -webkit-animation-name: blink;
   -webkit-animation-duration: 0.4s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -webkit-animation-direction: alternate;
   -moz-animation-name: blink;
   -moz-animation-duration: 0.4s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
   -moz-animation-direction: alternate;
   animation-name: blink;
   animation-duration: 0.4s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-direction: alternate;
}

HTML:

Code: Alles auswählen

<span class="blink">Dieser Text blinkt.</span>

Das Einzige, was die Suppe etwas trübt, sind die "Browserhacks", da einige Engines (noch) mit einem speziellen Prefix arbeiten.
Deshalb auch die mehrfache Codierung.