[JavaScript]TippBox

[leller]

Hallo,

ich muss mich wieder mit Javascript rumschlagen (will sagen, in Sachen Javascript bin ich unmotiviert mich da tiefer gehend einzuarbeiten) und zwar möchte ich eine TippBox OnMouseOver bzw OnMouseClick anzeigen.

Bisher lade ich bereits für einige DIV-Aktionen das Script von scriptaculous, es wäre schon, wenn auch diese Aktion mit Mitteln aus dieser Sammlung ginge.

Hat da jemand einen Ansatzpunkt, welche Funktionalität von scriptaculous es da bedarf, damit ich etwas gezielter nachlesen kann.

Bzw. wenn scriptaculous nicht hinreicht, welche anderen Bibliotheken ratsam sind.

Zur Zeit läuft ein selbst geschriebenes Script, dass auch soweit funktioniert, nur springt (scrollt) die Seite beim Aufrufen der TippBox (OnClick) immer an den Anfang der Seite hoch und bleibt nicht im Bereich der TippBox.

Vielen Dank im Voraus für eure Anregungen

 

[tleilax]

Du benutzst ja schon Scriptaculous, das heisst, Prototype ist auch vorhanden. Damit lässt sich das Ganze so gestalten:

<script type="text/javascript" src="js/prototype_1.6.0.js"></script>
<style type="text/css">
#tooltip_layer {
	border: 1px solid black;
	background-color: #FFC;
	width: 300px;
}
</style>
<a href="help_for.php?id=666" class="tooltip" title="Was auch immer hier stehen soll...">foo</a>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'dom:loaded', function() {
  $$('.tooltip').invoke('observe', 'mouseover', function(event) {
    if ($('tooltip_layer')) {
      return;
    }
    $$('body').first().insert(new Element('div', {id: 'tooltip_layer'}).update(event.element().readAttribute('title')));
    event.element().writeAttribute('title', '');
    $('tooltip_layer').absolutize().setStyle({left: (event.pointerX()+5)+'px', top: (event.pointerY()+5)+'px'});
  }).invoke('observe', 'mouseout', function(event) {
    event.element().writeAttribute('title', $('tooltip_layer').remove().innerHTML);
  });
});
//]]>
</script>

Ist nur als Beispiel oder Einstieg gedacht, aber es funktioniert...

 

[leller]

Danke für die schnelle Antwort,

werde mir das ganze mal anschauen und vielleicht dann noch spez. Fragen stellen.

Sehe ich das Richtig, dass hier der Title in der TippBox angezeigt wird?

 

[tleilax]

Exakt.