Tooltip wie auf chip.de
Sven
- design/layout
0 Kai Lahmann0 Stefan Einspender0 Sven0 Kai Lahmann0 molily0 Kai Lahmann0 molily
0 Wilhelm
0 Thoralf Knuth
Hallo
Ich baue im moment eine neue Internetseite jedoch wollt ich diesmal einen Tooltip wie er auf der chip seite oder auf der Nero wenn man etwas runterladen möchte verweden. Also mit einer grafik und text die neben dem Cursor.
Im Archiv hab ich schon geguckt aber nichts gefunden das mir hilft.
Ich hoffe ich bekomme hier Hilfe udn danke schonmal im Vorraus
hi
Ich baue im moment eine neue Internetseite jedoch wollt ich diesmal einen Tooltip wie er auf der chip seite oder auf der Nero wenn man etwas runterladen möchte verweden. Also mit einer grafik und text die neben dem Cursor.
Ein Tooltipp wäre das title=""-Attribut, dass man an jeden HTML-Element verwenden kann.
Theoretisch gibt es noch die Möglichkeit soetwas über CSS zu lösen, das überfordert dann fast alle Browser (außer Mozilla ;)
Grüße aus Bleckede
Kai
Hallo Sven,
Ich baue im moment eine neue Internetseite jedoch wollt ich diesmal einen Tooltip wie er auf der chip seite oder auf der Nero wenn man etwas runterladen möchte verweden. Also mit einer grafik und text die neben dem Cursor.
viele Leser dieses Forums besuchen die von Dir genannten Websites
nicht so oft wie Du und da ist Deine Beschreibung schon sehr vage.
Ich konnte auf http://www.chip.de/ nix feststellen, was auch nur in
etwa Deiner Beschreibung entspricht, also formuliere mal bitte, was
genau Du da meinst.
Viele Grüße,
Stefan
Hallo Sven,
Ich baue im moment eine neue Internetseite jedoch wollt ich diesmal einen Tooltip wie er auf der chip seite oder auf der Nero wenn man etwas runterladen möchte verweden. Also mit einer grafik und text die neben dem Cursor.
viele Leser dieses Forums besuchen die von Dir genannten Websites
nicht so oft wie Du und da ist Deine Beschreibung schon sehr vage.
Ich konnte auf http://www.chip.de/ nix feststellen, was auch nur in
etwa Deiner Beschreibung entspricht, also formuliere mal bitte, was
genau Du da meinst.
Viele Grüße,
Stefan
Hallo
ich dachte eigentlich chip wäre doch eine eher bekannte seite.
Nagut hier ien beispiellink: http://www.chip.de/downloads_updates/downloads_updates_55531.html
wenn man da in der rechten Tabllee über selfhtm mit dem cursor geht erscheint ein kleines männchen das einem erzählt wie klange der Download ungefähr dauert.
Oder:
http://www.nero.com/en/content/download.html wenn man dort die maus über einen Download hat.
Die von Thoralf genannte Seite werde ich mir gleich mal angucken
mfg
Sven
hi
http://www.chip.de/downloads_updates/downloads_updates_55531.html
wenn man da in der rechten Tabllee über selfhtm mit dem cursor geht erscheint ein kleines männchen das einem erzählt wie klange der Download ungefähr dauert.
ich seh da nix.
http://www.nero.com/en/content/download.html wenn man dort die maus über einen Download hat.
da seh ich was - was hässliches.
Grüße aus Bleckede
Kai
Hallo,
http://www.chip.de/downloads_updates/downloads_updates_55531.html
ich seh da nix.
*lol* Das ist zum totlachen. Starte den Internet Explorer, wenn er dir zur Verfügung steht und schau dir die Seite an. Ich habe selten so einen albernen, sinnlosen Schwachfug gesehen. :)
<img src="http://antivenom.port5.com/chippy.png" border=0 alt="">
http://www.nero.com/en/content/download.html wenn man dort die maus über einen Download hat.
da seh ich was - was hässliches.
Für DOM-Browser dürfte man eigentlich problemlos ein funktioniernden JavaScript-Tooltip zusammenschustern können. Die o.g. Beispiele funktionieren in Browsern != IE scheinbar gar nicht oder fehlerhaft.
Ich persönlich würde für Mozilla einen reinen CSS-Tooltip einbauen, wie in Eric Meyers Beispiel http://www.meyerweb.com/eric/css/edge/popups/demo.html, und auf JavaScript komplett verzichten. Ein wirklicher Tooltip wäre das nicht (ein bisschen mit position:relative dürfte das aber auch möglich machen), es würde aber seinen Zweck erfüllen.
Obwohl man natürlich argumentieren könnte, dass die Mehrheit IE nutzt und man demnach die Minderheit anstatt die Mehrheit diskriminieren sollte. Aber auf solche Diskussionen lasse ich mich nicht ein.
Kai
Mathias
hi
*lol* Das ist zum totlachen. Starte den Internet Explorer, wenn er dir zur Verfügung steht und schau dir die Seite an. Ich habe selten so einen albernen, sinnlosen Schwachfug gesehen. :)
<img src="http://antivenom.port5.com/chippy.png" border=0 alt="">
gut.. wollte man wohl den Mozilla-Usern den Gefallen tun, dass sie den Müll da nicht sehen müssen.
Für DOM-Browser dürfte man eigentlich problemlos ein funktioniernden JavaScript-Tooltip zusammenschustern können. Die o.g. Beispiele funktionieren in Browsern != IE scheinbar gar nicht oder fehlerhaft.
Das untere Tut in Mozilla.
Obwohl man natürlich argumentieren könnte, dass die Mehrheit IE nutzt und man demnach die Minderheit anstatt die Mehrheit diskriminieren sollte. Aber auf solche Diskussionen lasse ich mich nicht ein.
ein besserer Browser sollte einen Vorteil haben ;)
ganz genau geht's so:
<a>Text<span>Tooltip</span></a>
jetzt bekommt das "a" ein position:relative, und für "a span" gibt's ein position:absolute - der Rest kommt dann von alleine.
Grüße aus Bleckede
Kai
Hallo, Kai,
ganz genau geht's so:
<a>Text<span>Tooltip</span></a>
jetzt bekommt das "a" ein position:relative, und für "a span" gibt's ein position:absolute - der Rest kommt dann von alleine.
Hier gäbe es zu beachten, dass obige Version nicht sehr abwärtskompatibel und zugänglich ist. Wenn man gleichzeitig noch mit display:block für die a-Elemente arbeitet, dann bekommt man ohne CSS: TextTooltip TextTooltip TextTooltip TextTooltip ...
Das ist vor allem für Textbrowser und CSS-Ignoranten problematisch und stellt Barrieren für behinderte Menschen dar.
Ich dachte daran, dass man eventuell Füllzeichen einfügen könnte, welche man für CSS-Browser versteckt. So in der Art:
<a>Text<span style="display:none;">: </span><span class="tooltip">Tooltip</span></a><span style="display:none;"><br /></span>
<a>Text...
Wobei man nun streiten könnte, ob man den Tooltiptext mit in das a-Element aufnehmen sollte (klar, es ist nötig, aber man könnte das position:relative auch einem span-Element zuweisen, welches das a-Element und den Tooltiptext umschließt). Ein Screen Reader, der die Links einer Seite vorliest, sollte bspw. besser nur den Rubriknamen (falls es sich um eine Navigation handelt) anstatt die ellenlange Beschreibung vorlesen. accesskey und tabindex für den Link würde ich auch noch einfügen. Wenn möglich auch einen Link, mit dem man die Navigation überspringen kann (bei Bedarf kann man den auch mit display:none verstecken).
Gutes Markup ist das imho auch nicht. Eine Definitionsliste (dl) o.ä. wäre hier zur Strukturierung angemessener. Dürfte man auch hinkriegen, wenn ich mir Eric Meyers Menü ansehe, welches auf einer verschachtelten unsortierten Liste basiert.
Alles sehr umständlich; ich vertraue dem title-Attribut. :)
Mathias
ich dachte eigentlich chip wäre doch eine eher bekannte seite.
Nagut hier ien beispiellink: http://www.chip.de/downloads_updates/downloads_updates_55531.html
<subjektiv>
Tja, die Zeitung _war_ mal bekannt und gut, aber seit sie sich auch nur auf dem Niveau "1234 geheime Funktionen Windows" bewegt, lese ich sie nicht mehr.
</subjektiv>
Die Seite war eher schon immer unuebersichtlich.
Wenn Scripte einer Fachmagazin-Site nur unter einem Browser funktionieren, sorry, das sagt fuer mich viel ueber die Qualitaet selbiger aus.
Zu Deiner Frage: Das Ganze funktioniert mit Layer (div) und findet sich fast in jeder Scriptsammlung.
http://aktuell.de.selfhtml.org/links/dhtml.htm
Gruesse
Wilhelm
Hallo
Ich baue im moment eine neue Internetseite jedoch wollt ich diesmal einen Tooltip wie er auf der chip seite oder auf der Nero wenn man etwas runterladen möchte verweden. Also mit einer grafik und text die neben dem Cursor.
http://www.bosrup.com/web/overlib/ könnte Dir helfen.
Gruss, Thoralf