Blink-Funktion in allen aktuellen Browser ermöglichen!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Blink-Funktion in allen aktuellen Browser ermöglichen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Blink-Funktion in allen aktuellen Browser ermöglichen! datum

01.06.2007 18:11 (zuletzt bearbeitet: 16.11.2019 08:37)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Blink-Funktion in allen aktuellen Browser ermöglichen!
Aktualisiert 16.11.19

Das überarbeitete Script braucht nur in die "Fußzeile" eingetragen zu werden. Somit werden keine Veränderungen im Template vorgenommen! Der zu blinkende Text muß nur noch von <blink> und </blink> eingeschlossen werden.
Der Wert hinter "speed"(2000= 2s) bestimmt den Blinkintervall. Das Script wurde in allen aktuellen Browser (IE 10, FireFox 23.0.1, GoogleChrome 29.0, Opera 16.0) getestet.

Nicht nur Text kann blinken! <blink>

</blink>

1
2
3
4
5
6
7
8
9
10
 
<script language="JavaScript">
blink(0.7);
function blink(speed) {
if (speed) {
if (document.getElementsByTagName('blink')) setInterval("blink()", speed*2000);
return; }
var blink = document.getElementsByTagName('blink')
for (var i=0; i<blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""}
</script>
 

Bis dann
Wolfgang

Antworten

#2 | Blink-Funktion im Forum installieren datum

02.06.2007 11:56 (zuletzt bearbeitet: 16.11.2019 08:41)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Blink-Funktion im Forum installieren
Aktualisiert 06.11.19

Java-Script, wie oben beschrieben in die Fußleiste eintragen
HTML-Code in Forum-Code umsetzen unter "Admin > Einstellungen > Codes/Smilies" > Ersetze: + Mit:

1
2
3
4
5
 
Ersetze:
[blink] ... [/blink]
 
Mit:
<blink> ... </blink>
 

Das war's [blink] Fertig! [/blink]

Bis dann
Wolfgang

Tausendstern findet das Top!

Antworten

#3 | Die Blink-Funktion funktioniert wieder! datum

03.09.2013 18:22 (zuletzt bearbeitet: 16.11.2019 08:43)

Die Blink-Funktion funktioniert wieder!
Aktualisiert 16.11.19

Durch die Änderungen in den letzten Jahren hat sich an den Browser viel getan. Hierbei ist die Blink-Funktion bei einigen Browsern auf der Strecke geblieben oder alte Blink-Scripte haben nicht mehr funktioniert! Das JavaScript wurde den aktuellen Browsern (IE 10, FireFox 23.0.1, GoogleChrome 29.0, Opera 16.0 ) angepasst und in dem obigen Beitrag bereits geändert.

Bis dann
Wolfgang

Antworten

#4 | RE: Die Blink-Funktion funktioniert wieder! datum

15.09.2016 17:50 (zuletzt bearbeitet: 15.09.2016 17:51)

super

Scannerxy findet das Top!

Antworten

#5 | Blink-Funktion per CSS realisieren! datum

29.03.2020 16:43 (zuletzt bearbeitet: 21.10.2024 18:52)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Blink-Funktion per CSS realisieren!
Aktualisiert 21.10.2024

Das TAG <blink> ist veraltet und wird nur noch von wenigen Browser unterstützt.
Der Blinkeffekt wird eher selten verwendet.
Wird der Blinkeffekt eingesetzt, sollte man auf die Geschwindigkeit achten! Ein schneller Blinkrhythmus kann auch schnell nervig werden!
Auch das komplette Verschwinden der Schrift in den Blinkpausen ist oft ungünstig!

Mit CSS3 ist es auf einfachste Weise möglich, alle unguten Eigenschaften vom alten TAG <blink> aufzuheben!
Es lässt sich die Blinkzeit, das Blinkverhältnis und die Abdunklungsstärke der Schrift bestimmen!

Blinken per CSS3 - Zeitlich einstellbar (hier 4s)

Trägt man in die CSS die folgenden Zeilen ein, kann der alte TAG <blink> ... </blink> wiederbelebt werden!
In Zeile 2 kann die Blinkdauer eingestellt werden!
In Zeile 11 kann das Blinkverhältnis über Prozent und die Abdunklung über opacity angepasst werden!
Die Abdunklung ist hier so eingestellt, dass die Schrift nicht komplett verschwindet, sondern leicht sichtbar ist (opacity:0.2)!
Sind noch vorhandene Blink-Scripte im Einsatz, sollten diese deaktiviert werden!
Zeile 5-8 und 14-17 ermöglichen eine Blinkfunktion auch in älteren Browsern!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
blink {
animation: blinker 3.0s linear infinite;
 
/* für Browser älterer Generation*/
-webkit-animation: blinker 3.0s linear infinite;
-moz-animation: blinker 3.0s linear infinite; 
-o-animation: blinker 3.0s linear infinite; 
-ms-animation: blinker 3.0s linear infinite; 
}
 
@keyframes blinker {50% {opacity: 0.2;}}
 
/* für Browser älterer Generation*/
@-moz-keyframes blinker {50% {opacity: 0.2;}}
@-webkit-keyframes blinker {50% {opacity: 0.2;}}
@-o-keyframes blinker {50% {opacity: 0.2;}}
@-ms-keyframes blinker {50% {opacity: 0.2;}}
 

Schließen

Es ist auch möglich über eine beliebige Class das Blinken zu realisieren!
z.B.: <span class="blinkCSS"> ... </span>
In Zeile 2 kann die Blinkdauer eingestellt werden. Zusätzlich wurde hier noch Farbe und Schriftgröße bestimmt!
In Zeile 11 kann das Blinkverhältnis über Prozent und die Abdunklung über opacity angepasst werden!
Die Abdunklung ist hier so eingestellt, dass die Schrift nicht komplett verschwindet, sondern leicht sichtbar ist (opacity:0.2)!
Sind noch vorhandene Blink-Scripte im Einsatz, sollten diese deaktiviert werden!
Zeile 5-8 und 14-17 ermöglichen eine Blinkfunktion auch in älteren Browsern!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.blinkCSS{
  animation: blinker 3.0s linear infinite; color: #1c87c9; font-size:28px;
 
/* für Browser älterer Generation*/
  -webkit-animation: blinker 3.0s linear infinite; color: #1c87c9; font-size:28px;
  -moz-animation: blinker 3.0s linear infinite; color: #1c87c9; font-size:28px;
  -o-animation: blinker 3.0s linear infinite; color: #1c87c9; font-size:28px;
  -ms-animation: blinker 3.0s linear infinite; color: #1c87c9; font-size:28px;
}
 
@keyframes blinker {50% {opacity: 0.2;}}
 
/* für Browser älterer Generation*/
@-moz-keyframes blinker {50% {opacity: 0.2;}}
@-webkit-keyframes blinker {50% {opacity: 0.2;}}
@-o-keyframes blinker {50% {opacity: 0.2;}}
@-ms-keyframes blinker {50% {opacity: 0.2;}}
 

Schließen

Bis dann und viel Spaß beim Umsetzen!
Wolfgang

Hans58 findet das Top!

Antworten

Moderations-Kommentar:
Beitrag aktualisiert!

Neu! Weitere Diashow in der Bildergalerie! � � Iconbar & Navileiste fixieren - Teil 1(2)

�hnliche Themen

Antworten

Letzter Beitrag

VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 1 22.09.2024 15:30
Wolfgang • Zugriffe: 469
Fehlerhafte Darstellung und Verlinkungsfehler mit dem Samsung-Browser im S5
Erstellt im Forum Tricks & Tipps f�r Smartphones und iPhones von Wolfgang 0 23.06.2018 23:31
Wolfgang • Zugriffe: 719

Mobile Geräte: Funktionen ausblenden oder abschalten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

04.11.2018 08:20
von

Wolfgang • Zugriffe: 1503

Microsoft veröffentlicht erstes großes November-Update für Windows 10 - Windows Updates-Funktion reparieren
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps von Wolfgang

20.11.2015 15:39
von

Wolfgang • Zugriffe: 979

Mit Multi-Browsern oder Cross-Browsern Webseiten testen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

11.08.2019 10:46
von

Wolfgang • Zugriffe: 1317

Beitrag gelesen - Neue Funktion im Bedanken & Bewertungssystem
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

04.01.2022 00:47
von

Mato • Zugriffe: 1888

CSS 3 - Abgerundete Ecken in allen Browsern darstellen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.03.2014 09:20
von

tobias • Zugriffe: 1337

Animierte Browser-Titelleiste mit Laufschrift
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 4 05.05.2020 20:38
Wolfgang • Zugriffe: 3229
Deutschsprachige Browser-Erweiterungen für die unterschiedlichsten Browser!
Erstellt im Forum Empfehlenswerte und interessante Links! von Wolfgang 2 30.07.2019 02:03
Alfemi • Zugriffe: 2000

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

36%