Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Laienzwischenfrage: Bevor man mit CSS-Anweisungen mehr verursacht als gewollt, wäre ein animiertes GIF nicht einfacher?

Hallo !

Man muss zudem darauf achten, das etliche (ältere) Browser blinkende Texte und dgl. nur schlecht oder gar nicht anzeigen.

Man findet viele leider nur schlecht funktionierende Codes im Net...

Also verstehe ich dich richtig? Du möchtest eine im Adminmenü Hinterlegte Grafik z.b. Neue Kalendereinträge zum Blinken Bringen? Oder willst du eine Grafik irgendwo im Forum einbinden z.b. Fusszeile die du zum Blinken bringen möchtest?

Für Fall 1 : Der Wolfgang hat in seinen Forum eine Möglichkeit per Templates Änderung
http://www.hilfe-tricks-tipps.de/t736f31...en.html#msg1657


Für Fall 2 :
http://www.hilfe-tricks-tipps.de/t71f31-...moeglichen.html

Eine weitere Möglichkeit für Bilder die in Fusszeile sind z.b.

<script type='text/javascript'>
 

// Hier die Einstellungen für die Animation vornehmen
 
var Geschwindigkeit = 100;
var Anzahl_der_Zooms = 5;
var Zoomen_in_Pixel = 2;
 
// Ab hier nichts mehr ändern
 
var Bilder_Zooms = new Array();
var wie_Zoomen = new Array();
 
function Bild_gross_klein()
{
if(document.images)
{
if(document.gross_klein)
{
if(document.gross_klein.length)
{
for(var i=0;i<document.gross_klein.length;i++)
Bildgroesse_aendern(document.gross_klein[i],i);
}
else
Bildgroesse_aendern(document.gross_klein,0);
}
window.setTimeout("Bild_gross_klein()",Geschwindigkeit);
}
}
 
function Bildgroesse_aendern(Bild,Index)
{
var Breite = Bild.width;
var Hoehe = Bild.height;
 
if((Breite>0)&&(Hoehe>0))
{
if(!Bilder_Zooms[Index])
Bilder_Zooms[Index] = 0;
if(!wie_Zoomen[Index])
wie_Zoomen[Index] = 0;
 
if(Bilder_Zooms[Index]>=Anzahl_der_Zooms)
{
if(wie_Zoomen[Index]==0)
wie_Zoomen[Index] = 1;
else
wie_Zoomen[Index] = 0;
Bilder_Zooms[Index] = 0;
}
Bilder_Zooms[Index]++;
 
if(wie_Zoomen[Index]==0)
{
Breite += Zoomen_in_Pixel;
Hoehe += Zoomen_in_Pixel;
}
else
{
Breite -= Zoomen_in_Pixel;
Hoehe -= Zoomen_in_Pixel;
}
Bild.width = Breite;
Bild.height = Hoehe;
}
}
function initbgk() {
	window.setTimeout("Bild_gross_klein()",Geschwindigkeit);
}
//-->
</script>
<br />
 
<br />
<script type="text/javascript">initbgk();</script>
<img border=”0" name="gross_klein" src='http://up.picr.de/17169469rd.png' border='0' />
 
 

Soll das Auge bei einer bestimmten Aktion blinken oder immer?

Wenn immer blinken soll und du es nicht kompliziert haben möchtest, also ohne Scripts und Codes, fällt mir als Lösung auch nur eine animierte Grafik ein. Ein pulsierendes Auge oder eins, was sich farblich verändert oder zwinkert ...

Auch dafür gibt es eine Lösung, CSS3,die moderne Browser "verstehen".
Hier ein Beispiel,für genau dieses "Augen-Bild" zum blinken zu bringen:

.page_gallery_viewpic .foptions img{
-webkit-animation-name: blinken;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinken;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
animation-name: blinken;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@-webkit-keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}
.page_gallery_viewpic #foptions_bar img{
opacity: 1 !important;
}
 
 

Sollte in allen gängigen modernen Browsern funktionieren.

Gruß
Olaf

In der ersten Zeile wird die CSS Klasse angegeben,die Du angesprechen willst.
Es sind drei Blöcke (-webkit-animation,-moz-animation und animation) pro Klasse,die dann verschiedene Browser ansprechen.
In den keyframes wird dann angegeben,was passieren soll.In diesem Fall wird innerhalb eine Sekunde eine halbe Sekunde (bis 50%) lang das Bild aufgeblendet und dann die letzte halbe Sekunde (bis 100%) das Bild wieder abgeblendet.Danach beginnt der Prozess wieder von vorne.

.page_gallery_viewpic #foptions_bar img{
opacity: 1 !important;
}
 

Mit dieser Anweisung wird verhindert,daß das "Augenbild" mit den Aufklappbild (Pfeil nach unten) bei den "Einstellungen" mit blinkt.
Kannst es ja mal entfernen,dann weißt Du wofür ich es mit einsetzen mußte.

Diese "blink" CSS Anweisung kann man beim austauschen der CSS Klasse für viel Sachen einsetzen.Ich habe sie mal in meinem Testforum unten in den Statistiken für die beiden Symbol-Erklärungen eingesetzt.

Gruß
Olaf

Wie bekomme ich folgendes zum blinken?
Diese kleine Sprechblase im V6

.xob xob-comment-alt-double fnew
 
{
-webkit-animation-name: blinken;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinken;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
animation-name: blinken;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@-webkit-keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes blinken {
50% { opacity: 1; }
100% { opacity: 0; }
}