Blinkendes Textobjekt

Scripte > Text- & Tabellenobjekte

Blinkender Text - Blinkender Hintergrund

Möchte ich bestimmte Textbereiche, -passagen oder ganze Elemente in Textblöcken und/oder Tabellen blinken lassen, bieten sich nicht sehr viele Möglichkeiten. Hier ein paar simple Beispiele zur Ausführung.

Dazu wird eine oder je nach Bedarf alle GIF-Dateien zwingend benötigt, die den blinkenden Hintergrund erzeugen und in unterschiedlicher Taktung blinken. In der Gestaltung kann jeder nun über den Style im HEAD- und/oder BODY-Bereich seine eigenen Wünsche umsetzen.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Voraussetzung ist das jeweils benötigte GIF-Image:

blink1.gif:

blink2.gif:

blink3.gif:

blink4.gif:

Und die jeweils benötigte CSS-Anweisung im HEAD-Bereich:

Code für den <HEAD> Bereich

<style>

.blink_1a { background-image: url(wsX5Obj/Obj123_0/blink1.gif); background-color: #ff0; }
.blink_1b { background-image: url(wsX5Obj/Obj123_0/blink1.gif); background-color: #000; color:#fff; }
.blink_2a { background-image: url(wsX5Obj/Obj123_0/blink2.gif); background-color: #ff0; }
.blink_2b { background-image: url(wsX5Obj/Obj123_0/blink2.gif); background-color: #000; color:#f00; }
.blink_3a { background-image: url(wsX5Obj/Obj123_0/blink3.gif); background-color: #ff0; }
.blink_3b { background-image: url(wsX5Obj/Obj123_0/blink3.gif); background-color: #000; color:#ff0; }
.blink_4a { background-image: url(wsX5Obj/Obj123_0/blink4.gif); background-color: #ff0; }
.blink_4b { background-image: url(wsX5Obj/Obj123_0/blink4.gif); background-color: #ff0; color:#f00; }

</style>

Vor dem </HEAD> Tag

Dieser Textteil blinkt hier.

Dieser Textteil blinkt hier.

Code für den <BODY> Bereich

Codes von links nach rechts:

Dieser Textteil <font class="blink_1a">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_1b">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_2a">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_2b">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_3a">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_3b">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_4a">blinkt</font> hier. <br /><br />

Dieser Textteil <font class="blink_4b">blinkt</font> hier.

Nach dem <BODY> Tag

Das ist die Geschichte von Hänsel und Gretel, die sich im Wald verlaufen haben und dabei auf ein Hexenhaus gestoßen sind.

Code für den <BODY> Bereich

Code oben:

Das ist die Geschichte von Hänsel und Gretel, die sich im Wald verlaufen haben und dabei auf ein Hexenhaus gestoßen sind.

</div>

Code unten:

Das ist die Geschichte von Hänsel und Gretel, die sich im Wald verlaufen haben und dabei auf ein Hexenhaus gestoßen sind.

</div>

Nach dem <BODY> Tag

Natürlich geht das auch ohne CSS-Anweisung im HEAD-Bereich:

Natürlich geht das auch ohne CSS-Anweisung im HEAD-Bereich.

Code für den <BODY> Bereich

Natürlich geht das auch <font style="background-image: url(wsX5Obj/Obj123_0/blink1.gif); background-color: yellow">
ohne CSS-Anweisung</font> im HEAD-Bereich.

</div>

Nach dem <BODY> Tag

» nach oben «