Hi,
habe kürzlich auf eine seite tooltips gesehen, die beim hovern wie durchsichtige kleine areas erschienen.
Wie wird denn das nun iwieder gemacht? Java?
schönen mittwoch jochen

Was ist "hovern"?

Frag mal Tim Taylor!

Tomac Sehr gut!!!

Jesses: So was wie MouseOver

Super Titel.... keine Schreibfehler... keine Anglizismen so muss ein Post aussehen!

Egal.. Im Hintergrund (also als Hintergrund) liegt das Bild, welches Du sehen willst. Dieses wird verdeckt durch ein Bild im Vordergrund welches einfach in ein Transarentes Gif geändert wird, sobald Du mit der Maus darüber fährst.

Geht mit Java-Script.

Ein Link zum Beipsiel wäre angebracht gewesen... zzz

Sowas geht auch mit der Layer Technik.

gewoldi
Super Titel.... keine Schreibfehler... keine Anglizismen so muss ein Post aussehen!

Transarentes Gif ?

entschuldigung für die formalen Fehler in der Post.
Übrigens Du schreibst:
"keine Anglizismen so muss ein Post aussehen!"

Müste es eine Post heissen, oder ist Post ein Anglizismus?

Egal.
Leider habe ich keinen Link.

Liebe Grüsse Jochen

Ein Bild, welches sich, wenn man mit der Maus drüber geht, in ein transparentes GIF wandelt und den Blick auf den Hintergrund (Text, was auch immer) freigibt.

Jochen

Hihi, schön den Ball wieder zurückgespielt. Ist ja eher nicht ein Problem das was mit exzessiven anglizismus zu tun hat sondern mit Fachjargon, genau gleich wie halt in der Küche vieles französisch ist, so ist im webdesign vieles Englisch...

Also: Tooltips kann man ja grad bei Links mit dem alt attribut im < a > tag machen, das meinst du aber wohl nicht.

Mit Java Script können auch ganz gut MouseOver Effekte gemacht werden, aber ob das die richtige Lösung bei Tooltips ist, ich weiss nicht. Sieht dann etwas unprofessionell aus imho.

Die schönsten Tooltips sind mit AJAX gemacht, aber das kann nun nicht jeder programmieren, leider.

Weitere Infos hier: http://de.selfhtml.org/

jochen<br>
Hallo Jochen,

ich wollte Dich auf keinen Fall angreifen! Auch geht es mir nicht darum, hier nur noch die perfekte Rechtschreibung zu sehen... Ich hatte einfach Probleme zu verstehen, was Du meinst. IMHO wäre die Frage unter Vermeidung der Wörter "hover" und "areas" leichter zu verstehen gewesen.

Ich bin der Meinung, Du hättest Dich ohne großen Aufwand so ausdrücken können, dass man (ich) leichter versteht, was Du willst. Immerhin willst Du was vom Rest des Forums...


Wie gesagt, ist nicht speziell auf Dich gemünzt:
Ich helfe gerne wenn ich kann, aber erst recht wenn ich das kostenlos mache, erwarte ich ein gewisses Engagement vom Fragenden.

PS: Was ist mit der Seite "tooltips" gemeint? Eine Seite auf der Du ein entsprechendes Tool gefunden hast? Oder eine Seite, die sowas verwendet?

PPS: Antworten zewcklos, da ich jetzt arbeiten gehe (Fragen gegen Geld beantworten)

macsheep: alt attribut? das wurde nie dafür gedacht, alt steht für alternativ, also wenn kein bild verfügbar ist, soll es als hinweis angezeigt werden verwendet man title, diese alt geschichte ist ein bug/feature vom ms internet explorer... nur mal so als info

unter http://www.apple.com/finalcutstudio/ kann man sich sowas mit den transparenten grafiken mal ansehen, wenn man da über einen bereich geht wird ein hinweis oben drüber angezeigt und man sieht den hintergrund durch, keine große geschichte wenn man weiß wie man es macht (wie bei allem anderen eben auch)

macsheep:"Mit Java Script können auch ganz gut MouseOver Effekte gemacht werden, aber ob das die richtige Lösung bei Tooltips ist, ich weiss nicht. Sieht dann etwas unprofessionell aus imho."
"Die schönsten Tooltips sind mit AJAX gemacht, aber das kann nun nicht jeder programmieren, leider."

AJAX = Asynchronous JavaScript and XML, betonung liegt hier ganz klar auf JavaScript... sorry aber es reicht nicht einfach ein paar "coole" wörter zu verwenden um etwas "richtig" rüber zu bringen... weil für Tooltipps ist Asynchron & XML einfach nicht nötig, es sei denn der Tooltipp muss auf bestimmte andere Dinge der Seite auch noch reagieren und nicht nur auf "maus-drüber"

Hier ein Beispiel einer Lösung mit Ajax und CSS: http://web-graphics.com/mtarchive/BubbleTooltips.html
Und hier die Dateien und Anleitung dazu: http://web-graphics.com/mtarchive/001717.php

das beruhigt mich ja, dass gewoldi anscheinend noch weniger als ich verstanden hat, was ein "tooltip" sein soll. also: was'n das? wozu ist das gut?

ibookfan

Schön das dus besser kannst und freude daran empfindest andere zu bashen.

Also beim ersten Punkt habe ich mich wohl im Attribut vertan: Ich meinte wie du richtig korrigiert hast das title attribut. Dieses funktioniert fast auf den meisten Browsern, deshalb benütze ich es ab und zu.

Mit dem MouseOver Effekt reagiere ich auf einen Vorschlag weiter oben, ist doch wohl korrekt dass ich hier MIT BETONUNG AUF IMHO (Meiner Meinung nach) davon abrate weil ichs nicht schön finde.

Das mit AJAX hast du mir ja zum Glück auch bestätigt (Auch wenn du wohl lieber ein bisschen anficken wolltest). Mit schön meinte ich halt auch funktioniell umfangreich, viele Möglichkeiten auch in der Gestaltung und Interaktion ect... (Danke an dieser Stelle Sitox) Ausserdem war dies nur als Hint gemeint und nicht als Tipp er solle das anstreben. Wir wissen ja beide eigentlich nicht so genau was er wirklich will...

macsheep: ich wollte dich hier nicht beleidigen oder ähnliches... ich habe auch lange zeit den alt tag verwendet, weil ichs eben auch nicht besser wusste ich wollte nur nicht, dass es dir genauso geht... und wegen ajax, naja mich nervt es einfach wenn alle welt der meinung ist ajax ist sooo neu und ganz ganz toll obwohl es die technik schon "ewig" gibt diese nur eben nicht so einen coolen namen hatte, war also auch nicht gegen dich gerichtet... ajax ist bei mir seit einiger zeit eben ein "reizwort" fast wie dieser ganze web2.0 krempel

OK, angenommen, dachte schon du wolltest mir auf dem schlips herumtrampeln und fühlte mich pflichtbewusst beleidigt

Setzen wir die Kirche wieder ins Dorf und widmen uns der Sache.

Gruss

Ich würde es mit CSS acronym lösen:

Im HTML:
<acronym title="Barrierefreie Informationstechnik-Verordnung">BITV</acronym>

Im CSS:
abbr, acronym, .theabbr {
cursor: help;
border-bottom: 1px dotted #000; }

Und nur wenn es wirklich sein muss mit JavaScript.
Hatte mit JavaScript das ganze mal auf meiner Webseite.
http://www.snowboardcoach.ch/snowboardcoach/galerie.php

danke an Euch alle.
Das von sitox gezeigte Besipiel entspricht als Antwort meiner heute morgen gestellten Frage.

Auch die Idee von tricky ist toll (wo findet man den code?)

1. ich finde die lösungen sehr gut und informativ.
2. empfindet Ihr diese Lösungen auch als infornmtiv.
und
3. Die generelle Frage ist aber jetzt:
wie reagieren derart bestückte Webseiten bei user mit modem oder langsamen Verbidnungen?

Kurzum: sind diese Lösungen zur Informatin praktikabel oder nicht?
Liebe Grüsse Jochen

Ich war schon froh, nicht "TooltiPPs" lesen zu müssen

Meine CSS Version ist sicher die schnellste und Barrierefreiste Möglichkeit.
Wenn es WIRKLICH JavaScript sein MUSS:
kopiere doch einfach den Code aus meiner Webseite.
Solange du es nicht kommerziellen vertreibst ist es OK.
Meine Arbeiten stehen unter einer CC Lizenz http://creativecommons.org/licenses/by-nc-sa/2.0/de/

Wenn du dich für die Javascript Variante entscheidest,
schau dir das mal an http://www.chrisesler.com/mootools/mootools-tooltip.html oder google nach Sweet Titles.

Eine andere Möglichkeit wäre auch das per CSS zu lösen, nicht wie Tricky bereits angesprochen hat per XHTML, da hat man ja nur Einfluss auf die Gestaltung des auslösenden Elementes,
sondern in etwa so.

(X)HTML
<a href="#">
Tooltip
<span>Hier steht der Inhalt des Tooltips</span>
</a>

CSS
a {
position: relative;
}
a span {
position: absolute;
/* so positionieren wie du es gerne hättest */
display: none;
}
a:hover span {
display: block;
}

Ich denke das Beispiel spricht für sich selbst.

pünktchen:
(Meine!!!) Definition von Tooltips:
Ursprünglich Erklärungen zu Werkzeugen (Tool-Tip) Sie kommen aus Programmen in denen die Werkzeugpaletten nur aus kleinen Icons bestehen. Der Unerfahrene Benutzer wissen nicht, wozu diese Icons dienen. Also erscheint ein Erklärungstext, wenn man mit der Maus drüber fährt. So oder so ähnlich sollte es meiner Meinung nach sein.

jochen
Ich würde die Seite schlank lassen. D.h. so wenig Code wie möglich. Also die Variante nehmen, die am wenigstens Ladevomumen erzeugt. (Denke das sollte CSS ohne Grafik sein).

Hallo Leute,

ich habe hier wieder eine Menge gelent, Danke !!

Ich habe da aber noch eine Frage: Auf meiner Seite sind mehrere Select-Boxen daargestellt. Wenn ich da mit einem DIV einen 'ToolTip' darstelle wird dieses DIV immer von der Select-Box überlagert. (siehe Bild)
Wie bekomme ich es hin, dass die Select-Box im Hintergrung bleibt, also vom DIV überdeckt wird?

Danke
Meinolf

Hier das Bild (hoffe ich)

Wenn du dem DIV per Stilanweisung einen höheren z-index Wert zuweist, z.B. per
z-index: 12;
sollte dein DIV über den anderen Dingen schweben.

CU
Schmiddl

Danke fürt den Tipp,

wirkt sich zu mindest bein IE nicht aus.
Der Safari kann es !

Gruß
Meinolf