Alternative zu <marquee> als Ticker?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
blocken
code
datenmenge
display
favorit
grafik
inhalt
kleiner test
langsamer stoppen
menge
position
reinen text
sekunde
span
standard
steuer
stopp
stoppen
url
weg
-
Hallo,
man kann ja mit <marquee> eine Laufschrift / einen Ticker machen.
Bsp:
<marquee behavior="scroll" direction="left" scrollamount="8" onmouseover="this.stop();" onmouseout="this.start();"> <?php echo $inhalt; ?> </marquee>
aber welche Alternativen gibt es zu marquee ... (die evtl. Browser-Sicherer sind) ... mit JS?
Wichtig ist, das der Ticker nicht nur reinen Text kann, sondern auch Bilder und Links,
und am besten so, dass er auf MouseOver-Events "reagieren" kann (langsamer/stoppen)
...
zum Bsp oben: ... wie müsste der Code aussehen, wenn ich den Event "Stopp" nicht über marquee
sondern bei MouseOver eines Image (im $inhalt) machen will ... ???
<img src="...." onmouseover="???.stop();" onmouseout=\"???.start();" .. />
... bei marquee eine id oder name zuweisen um es bei bei mouseOver im img ansteuern zu können?
wie?
Beitrag zuletzt geändert: 1.5.2010 10:10:12 von questgames -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenige Sekunden mit Google und ein kleiner Test im FF unter Linux Ubuntu haben ergeben: mit diesem Code gehts
<marquee onMouseOver="this.stop()" onMouseOut="this.start()">Dies ist ein Beispieltext</marquee> -
ähhhm, jain ... genau das habe ich ja schon (siehe mein code oben, das gleiche)
ich suche a) eine Alternative: Ticker ohne marquee (in JS)
und b) wenn marqee, dann Stopp-Event erst bei mouseOver von IMG
<marquee ...id=??? ... >
<img src=".." alt="..." onmouseover="???.stop();" onmouseout="???.start();" />
<img src=".." alt="..." onmouseover="???.stop();" onmouseout="???.start();" />
<img src=".." alt="..." onmouseover="???.stop();" onmouseout="???.start();" />
</marquee>
wie ist die Syntax richtig?
... marquee eine id geben und diese bei IMG mouse-Event steuern (Stoppen)
? -
So schwer ist das wirklich nicht. Google findet bei derSuche nach "javascript ticker horizontal" eine Menge brauchbarer Codebeispiele mit Einbauanleitung.
FF -
ok, dachte vielleicht gibt es einen anderen "Standard" ,
die Beispiele in Google habe ich schon gefunden,
viele davon kommen mir aber etwas chaotisch oder übertrieben vor,
ich will ja auch nicht einfach einen Code kopieren, sondern es "verstehen"
z.B. mit <marquee id="box1" ... ...
... kann ich nicht bei <img ..... onmouseover="box1.stop();" onmouseout="box1.start();" ...
den Ticker steuern (stoppen) ... wie kann ich den Scroller "einfach" ansteuern als event im img?
Danke -
Ich würde dir empfehlen weder auf nicht Standard konforme HTML Tags zu setzen, noch auf JS (dieses würde ich nur in Ausnahmefällen benutzen), da du dann oft darauf achten musst, ob es auch wirklich überall läuft und das eine ganze Menge Arbeit benötigt - außerdem hat nicht jeder JS aktiviert.
Eine Altenative gibt es: Installiere die PHP gd Library bei dir. Mit ihr kannst du durch PHP Bilder manipulieren. Ich bin sicher du kannst auch irgendwie eine kleine Animation in ein Bild einbauen, indem dein Text eben von links nach Rechts fliegt oder ähnliches. Das tust du dann per PHP als Bild abspeichern und schon wurde aus einer News ein animiertes Bild errechnet, dass jeder ohne Probleme sehen kann.
1 Problem: Nicht überall ist diese Library installiert.
2 Problem: Ich weiß nicht 100%ig ob man mit PHP wirklich diese Animation erstellen kann, glaube aber nicht, dass es nicht geht. Sollte es gehen dürfte die Funktion schon recht anspruchsvoll sein.
Vorteile wären dann aber, dass du eine Browserübergreifende Lösung hast, die keine Probleme mehr hat mit irgendwelchen Standards und die jeder sehen kann. -
midwar schrieb:
Eine Altenative gibt es: Installiere die PHP gd Library bei dir. Mit ihr kannst du durch PHP Bilder manipulieren. Ich bin sicher du kannst auch irgendwie eine kleine Animation in ein Bild einbauen, indem dein Text eben von links nach Rechts fliegt oder ähnliches. Das tust du dann per PHP als Bild abspeichern und schon wurde aus einer News ein animiertes Bild errechnet, dass jeder ohne Probleme sehen kann.
Jeder? Nein, denn die Lösung, Text in Bildern zu verstecken ist nicht Barrierefrei.
Ein Javascript hat zumindest den Vorteil, daß man es derart gestalten kann, daß User ohne JS weiterhin den Text lesen können und nur auf eine Aninmation verzichten müssen.
FF -
fatfreddy schrieb:
midwar schrieb:
Eine Altenative gibt es: Installiere die PHP gd Library bei dir. Mit ihr kannst du durch PHP Bilder manipulieren. Ich bin sicher du kannst auch irgendwie eine kleine Animation in ein Bild einbauen, indem dein Text eben von links nach Rechts fliegt oder ähnliches. Das tust du dann per PHP als Bild abspeichern und schon wurde aus einer News ein animiertes Bild errechnet, dass jeder ohne Probleme sehen kann.
Jeder? Nein, denn die Lösung, Text in Bildern zu verstecken ist nicht Barrierefrei.
Ein Javascript hat zumindest den Vorteil, daß man es derart gestalten kann, daß User ohne JS weiterhin den Text lesen können und nur auf eine Aninmation verzichten müssen.
FF
Aber auch nur dann, wenn Bilder deaktiviert wurden. ;) Und wer macht das schon? -
midwar schrieb:
Aber auch nur dann, wenn Bilder deaktiviert wurden. ;) Und wer macht das schon?
Falsch!
Kein Screenreader, mit dem Sehbehinderte im Web unterwegs sind, kann Bilder darstellen.
Suchmaschinen sind ebenfalls nicht in der Lage, Textinhalte aus Bildern zu extrahieren und zu verarbeiten.
FF
Beitrag zuletzt geändert: 1.5.2010 12:34:07 von fatfreddy -
nein, kein PHP gd Library (schwachsinn) und bitte auch kein Flash ...
... ganz einfach ein "Laufband" das stabil in verschiedenen Browsern läuft,
marquee oder eben eine Alternative ... JS mooving-Divs, etc .. ??
-
Ganz allgemein würde ich solche Dinge mit einem div machen, wo im CSS overflow-x auf auto steht, dann kann man das div bei bedarf schon mal scrollen.
Das ist die Basis, die jeder(!) lesen, nutzen usw. kann und darauf baut man dann auf, indem man eine Laufschrift mit Javascript hinzufügt.
Denn so ganz nebenbei gibt es nicht nur Blinde, die mit einer Laufschrift Probleme haben und die somit eh die meisten Funktionalitäten einschränken, sondern auch welche die Probleme mit raschen Bildwechseln haben, oder nicht so schnell lesen können, wie die Schrift hindurch läuft. Diese Liste kann man natürlich noch erweitern, aber sie zeigt gut auf, warum sowas prinzipiell vom Nutzer zu steuern ist und zwar reicht da schon die Unterscheidung ob JS an oder aus ist und da kommt die Vorarbeit zum Tragen denn mit dem div ist sie trotzdem noch nutzbar.
Außerdem möchte ich noch erwähnen, dass sämtliche Spielereien auf einer Seite lediglich schmückendes Beiwerk sein sollten, darum fällt unter anderem auch der Vorschlag mit den Bildern weg. Bilder als Ersatz für Text ist mit Abstand die dämlichste Idee, die sich in den 90ern im Internet manifestiert hat und es wird allmählich mal wieder Zeit auch im Amateurbereich davon wegzukommen, denn Bilder sind nicht zugänglich, nicht für Suchmaschinen, nicht für Blinde, nicht für Menschen, die kein DSL 16K als Zugangspunkt haben und auch nicht für Leute die z.B. mit Lynx surfen (zugegeben sind wenige, aber das Ding ist so schnell und toll zum recherchieren, gerade weil keine Grafik alles versaut!), oder einfach nur das laden deaktiviert haben.
Um dieses Thema mal etwas ausführlicher zu behandeln, finde ich es auch wichtig mal zu erläutern, wie man zu einer Website kommt, denn das Konzept fängt nicht beim Design an, sondern als erstes steht die Frage, was man präsentieren will, dann kommt die Frage wie man das logisch aufbaut, sprich in welcher Reihenfolge das ganze im Quelltext auftauchen soll (Header, Navi, Content, Links, Footer).
Dann kann man sich an das Design machen, das kann sein wie es will, aber man sollte es von oben nach unten planen, um auch der logischen Reihenfolge zu entsprechen.
Zum Schluss verbindet man das ganze mit CSS und kann anschließend mit Javascript Funktionen zufügen.
Diese "Anleitung" soll kein Allheilmittel sein und kann auch ineinander verschwimmen, aber sie sollte grob eingehalten werden, denn bei dem Gehalt der meisten Seiten frage ich mich ob überhaupt der 1. Punkt hinterfragt wurde!
Zum Schluss möchte ich nochmal zeigen wie man eine Überschrift zugänglich gestalten kann und trotzdem eine Grafik als Text drin stehen hat!Das HTML: <h1>Diese Überschrift ist Zugänglich!<span></span></h1> Nun das CSS (die Grafik soll 100px breit und 40px hoch sein!): h1 { font-size:1em; line-height:1; height:40px; width:100px; position:relative; } h1 span { display:block; width:100px; height:40px; position:absolute; top:0; left:0; background:url('die-grafik.png'); }
Beschäftigt euch mal damit, es gibt auch noch andere Wege, beispielsweise hat sich auch dieser bewährt:Das HTML: <h1>Diese Überschrift ist Zugänglich!</h1> Nun das CSS (die Grafik soll wieder 100px breit und 40px hoch sein!): h1 { font-size:0px; line-height:0; color:transparent; height:40px; width:100px; background:url('die-grafik.png'); }
Das ist auch mein persöhnlicher Favorit, denn er hält das HTML am saubersten und die Datenmenge ist am kleinsten.
Und wie immer gilt fragt einfach weiter, falls ihr Probleme habt, ich helfe gerne! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
