"Grüne Links" erstellen (Bei Mauskontakt Dialogtext)??

[Schnappi]

Hi.

Ich muss eine Website für ein Langzeitprojekt in Geo machen und möchte für Fremdwörter einen sog. grünen Link erstellen, sodass wenn man mit der Maus drüber fährt eine kleine Definition erscheint.

Wie geht das, und wie heißen die eigentlich richtig?


/e: So sieht das aus, nur ohne Werbung:

http://img446.imageshack.us/img446/5236/bild14yz.png

[AHF]

nennt sich meines wissens intellitext.

[MadMan2k]

reicht vielleicht auch der <abbr> tag für deine Zwecke?

[Sephiroth]

Wenn du das genauso machen willst, dann brauchst du ein JavaScript, welches nach dem Laden der Seite alle Wörter durchgeht, prüft ob es in der Liste der zu erklärenden Wörter steht und sie dann enstprechend markiert und mit einem mouseover-Eventhandler versieht. Dieser muß dann ein enstsprechendes Fenster dort erstellen, wobei der passende Text dazu aus einer anderen Liste ausgelesen wird.

Alternativ bei sehr geringer Anzahl solcher Wörter kannst du die auch schon beim Schreiben der Seite so erstellen (grün und mit Eventhandler versehen).


reicht vielleicht auch der <abbr> tag für deine Zwecke?
Na der alleine wird nicht reichen, um sowas zu bewerkstelligen. :rolleyes: Und nur mit CSS ohne JS geht's geht's wohl auch nicht oder wie wird dann das andere Objekt (das Erklärungsfenster) plötzlich sichtbar (insofern es bereits erstellt wurde)?

[Schnappi]

Also eigentlich reicht es mir schon wenn ich bei einem Wort einfach "dazuschreibe" dass ein Popup erscheint, wie oben. Das Script braucht also nicht danach zu scannen, ich würd es ihm vorgeben.

Die Funktion die ich suche nennt sich eventhandler und ist ein JavaScript?
Werde ich mal nach gucken..

[Sephiroth]

http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover

Du solltest dir der Einfachheit halber einen Bereich auf der Seite festlegen wo ein so ein Fenster erscheint, wenn man mit der Maus über so ein Wort ist. Die Erklärung wird reingeschrieben (und der vorige Text entfernt) und dann die Box eingeblendet oder sie ist immer sichtbar und nur der Text erscheint dann und verschwindet anschließend wieder.

[MadMan2k]

Na der alleine wird nicht reichen, um sowas zu bewerkstelligen. :rolleyes: Und nur mit CSS ohne JS geht's geht's wohl auch nicht oder wie wird dann das andere Objekt (das Erklärungsfenster) plötzlich sichtbar (insofern es bereits erstellt wurde)?
für einzeilige erklärungen ist der tag eigentlich ausreichend und auch dafür vom standard vorgesehen.

tooltips mit css:

.parent:active .tooltip {
display: block;
}
edit:
ohne gewehr - aber ich habs schonmal nur mit css hingekriegt..

[darph]

für einzeilige erklärungen ist der tag eigentlich ausreichend und auch dafür vom standard vorgesehen.
Für Fremdwörter?

Ich dachte nur für Abkürzungen...

evtl <dfn> für Definition?

[Schnappi]

http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover

Du solltest dir der Einfachheit halber einen Bereich auf der Seite festlegen wo ein so ein Fenster erscheint, wenn man mit der Maus über so ein Wort ist. Die Erklärung wird reingeschrieben (und der vorige Text entfernt) und dann die Box eingeblendet oder sie ist immer sichtbar und nur der Text erscheint dann und verschwindet anschließend wieder.
Also der onmouseover ist schonmal nicht schlecht, allerdings wäre es besser wenn der Effekttext auf einer anderen Ebene erscheint, damit sich nicht der ganze Text verschiebt und somit die Formation aufhebt.

Ich denke mal

Du solltest dir der Einfachheit halber einen Bereich auf der Seite festlegen wo ein so ein Fenster erscheint, wenn man mit der Maus über so ein Wort ist. Die Erklärung wird reingeschrieben (und der vorige Text entfernt) und dann die Box eingeblendet oder sie ist immer sichtbar und nur der Text erscheint dann und verschwindet anschließend wieder.

das meintest du wegen meinem jetzigen Problem, nur verstehe ich die Lösung nicht ganz :redface:

[Sephiroth]

für einzeilige erklärungen ist der tag eigentlich ausreichend und auch dafür vom standard vorgesehen.

tooltips mit css:

.parent:active .tooltip {
display: block;
}
edit:
ohne gewehr - aber ich habs schonmal nur mit css hingekriegt..
Mir war der Tag ehrlich gesagt neu ....
Der IE kennt den abbr-Tag aber nicht, ergo müsste man den acronym-Tag nutzen (für mich das gleiche in "grün" und evt).
Da es aber nichts weiter ist als ein Inline-Element mit gestrichelter Linie und einem Title Attribut (!), kann man im Grunde auch ein span dafür nehmen. (mal Style-Änderungen außer acht gelassen)
Aber hast schon recht, für einzeilige Erklärungen reicht das title-Attribut eigentlich aus.

Zum Tooltip:
hm, ok, wär in der Tat eine Möglichkeit ... man erstellt das Element mit der Erklärung und blendet es zunächst aus und aktiviert es dann bei :hover oder eben :active.

Etwas ähnliches hatte ich shconmal gemacht, als ich ein JavaScript schrieb, welches title-Attribute mit Zeilenumbrüchen für Mozilla Browser umwandeln sollte. Da wurde dynamisch dann eben ein DIV, welches wie ein Tooltip gestylt wurde, nahe des Mauszeigers plaziert und ersetzten dann die \n durch <br/>. Das sollte eigentlich mal im Forum zum EInsatz kommen ... :rolleyes:

@darph
Tag-Mißbrauch :devil:

[Sephiroth]

Ich denke mal

...

das meintest du wegen meinem jetzigen Problem, nur verstehe ich die Lösung nicht ganz :redface:
in etwa so (gaaanz einfach gehalten) ...

<div id="erklaerbox"></div>
...
Hallo, jetzt kommt ein <span onmouseover="zeigeErklaerung('das ist ein fremdwort');" onmouseout="versteckeErklaerung();">fremdwort</span>, dessen Erklärung in der "Erklär-Box" erscheint. wenn man mit dem Mauszeiger drüber geht.

function zeigeErklaerung(aText) {
var textbox = document.getElementById('erklaerbox');
textbox.innerHTML=text;
textbox.style.visibility="visible"; // falls versteckeErklaerung() es ausblendet
}

function versteckeErklaerung() {
var textbox = document.getElementById('erklaerbox');
textbox.innerHTML="";
textbox.style.visibility="hidden"; // falls es ausgeblendet werden soll
}