Funktion mit Timer

[S-R SoftwareMedia]

Hallöchen alle zusammen :)
Also ich bin gerade dabei eine Funktion zu schreiben, mit der man einen Text in verschienden Farben zum leuchten bringt :P
ALso wenn man drauf klickt, dass der text dann z.b. 0,5 sekunden rot, dann 0,5 sekunden blau und dann 0,5 sekunden gelb ist und zum schluss wieder schwarz...
bis jetzt habe ich:

  
function blink(name, farbe) {  
    var element = document.getElementById(name);  
if(document.getElementById) {  
    element.style.color = farbe;  
}  
}  

Aber das verändert ihn ja nur in rot...
Ich arbeite zwar schon lange mit JavaScript aber mit Sachen Zeit in JavaScript habe ich nichts zu tun gehabt bis her...
Achja der HTML code lautet:

  
<span onmouseover="blink('element', 'red');" id="element">Hallo wie geht es dir?</span>  

Danke schonmal :)

[Patrick Andrieu]

Hallo S!

Tut erstmal nichts zur Sache, aber ich kann's nicht lassen (und mjerk wird's sicher auch freuen!):

<cite aus="Deiner HP">Daher biete ich Firmen und Privatleuten an einen professionellen Internetauftritt zu gestalten (...)</cite>

16 Errors, 3 warning(s)

Professionalität ist etwas Anderes.

--- Ende tut nichts zur Sache ---

Aber das verändert ihn ja nur in rot...

Gut, dass Du den HTML-Code noch gepostet hast...:

<span onmouseover="blink('element', 'red');" id="element">Hallo wie geht es dir?</span>

  
Welche Farbe übergibst Du denn hier? Eine andere als rot?  
  
Übergib gar keine Farbe. Am besten vergiß onmouseover als HTML-Event-Handler-Attribut. Die Farben könntest Du beispielsweise in einem Array definieren:  
  
var colors = new Array ('blue', 'red', 'green', 'yellow');  
  
Warum überprüfst Du auf getElementsById (auf die Browser, die das heute nicht verstehen, kann man getrost verzichten), aber in Deinem HTML-Schnipsel ist kein Element mit einer ID vorhanden?  
  
Als HTML:  
  
<span id="leuchttext">Hallo, wie geht es Dir</span>  
  
Im JavaScript:  
  
document.getElementById('leuchttext').onmouseover = function () {  
  this.color = 'red';  
}  
  
würde beim Mouseover den Text rot färben (und rot lassen).  
  
Und wenn Du Dich mit setTimeout() beschäftigst, schaffst Du den Rest auch schon, Du Profi! ;)  
  
  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
\_ - jenseits vom delirium - \_  
![](http://www.atomic-eggs.com/fuernA.jpg)  
   [Diblom](http://www.atomic-eggs.com/pics/diblom.png)   [[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash](http://www.atomic-eggs.com/)]  
[J'ai 10 ans!](http://www.atomic-eggs.com/wae/wae_10.shtml#a5) | Achtung [Agentur](http://www.atomic-eggs.com/cwi/cwi_5.shtml#a5)! | Nichts ist unmöglich? [Doch!](http://www.atomic-eggs.com/cwi/cwi_4.shtml) | [Heute](http://www.atomic-eggs.com/cgi-bin/date_today.pl) schon ge[gök](http://goek.atomic-eggs.com/goek_goek.html)t?

[Patrick Andrieu]

Hallo Fehlerteufel!

document.getElementById('leuchttext').onmouseover = function () {
  this.color = 'red';
}

der Teufel steckt im Detail:

Lese: this.style.color

Viele Grüße aus Frankfurt/Main,
Patrick

[Guy Gaz]

Hallo!

Hallo Fehlerteufel!

Lese: this.style.color

!  Lies, bitte Du Germanist!

Ciao

GG

[gast42]

document.getElementById('leuchttext').onmouseover = function () {
  this.color = 'red';
}

ich vermisse den angemessenen style

[Patrick Andrieu]

Hallo gast42!

ich vermisse den angemessenen style

Ich war schneller ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[gast42]

function blink(name, farbe) {
    var element = document.getElementById(name);

hier nutzt du getElementById

if(document.getElementById) {

und hier fragst du anschließend, ob es das überhaupt gibt. Das sieht nicht sehr logisch aus!

element.style.color = farbe;
}
}

  
du suchst vermutlich <http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=setTimeout>

[Felix Riesterer]

Liebe(r) S-R SoftwareMedia,

<span onmouseover="blink('element', 'red');" id="element">Hallo wie geht es dir?</span>

Besser so (warum kommt noch):

<span class="blink">Hallo Wie geht es Dir?</span>

So, nun kannst Du per JavaScript solcherlei Elemente (die der blink-Klasse zugehören) blinken lassen.

1. Schritt: Benutze eine der vielen Umsetzungen von getElementsByClassName(), um alle Elemente der Klasse "blink" zu ermitteln.
2. Schritt verleiehe allen diesen Elementen ein onmouseover-Ereignis.
3. Schreibe eine Funktion, die mittels window.setTimeout() die Farbveränderungen durchführt.

Deine Funktion blink könnte dann anstatt des Namens (genauer "id") gleich eine Referenz auf das Element selbst annehmen.

function blink(el) {  
    // el ist eine Referenz auf das entsprechende (<span>-)Element  
    el.style.color = "red";  
}

Alles Weitere ist eine Frage, wie man mittels JavaScript etwas animiert. Dazu habe ich einen Artikel geschrieben, den ich Dir zur Lektüre anempfehlen möchte: Animieren in JavaScript (Kleiner Lehrgang zum vernünftigen Schreiben eines Javascripts)

Liebe Grüße,

Felix Riesterer.