link-hilfe

Meinst du so in der Art wie hier -> http://web306.server3.webplus24.de/testseiten/tooltips/ (mit der Mouse den Satelliten berühren) 

Du darfst dir den Quelltext gerne ziehen - vergiß die Stylesheetdatei nicht, die brauchst du auch.

G.a.d.M.

Ronald

Ich hab grade gesehen, daß ich bei dem Beispiel gar keine exterenen Stylesheets eingebunden habe und auch das Javascript steht komplett mit drinnen.
Also einfach den Quelltext kopieren und nach eigenem Bedarf anpassen.

G.a.d.M.

Ronald

step by step - ich erkläre es gleich alles, muß nur erstmal was zu Essen machen => mein Sohn hat hunger und ich auch.

Bis nachher ...

Ohje - ich habs befürchtet

also ich versuche es mal - muß mich allerdings auch erst wieder reinlesen, da das Script schon älter ist:

<script type="text/javascript" language="JavaScript">
<!--
wmtt = null;
pl = 0;
pt = 0;


document.onmousemove = updateWMTT;


   function updateWMTT(e)
        {
        x = (document.all) ? window.event.x + document.body.scrollLeft: e.pageX;
        y = (document.all) ? window.event.y : e.pageY;
        if (wmtt != null)
           {
           wmtt.style.left = (x + pl) + "px";
           wmtt.style.top  = (y + pt) + "px";
           }
        }


   function showWMTT(id,plx,ptx)
        {
        pl = plx;
        pt = ptx;
        wmtt = document.getElementById(id);
        wmtt.style.display = "block"
        }


   function hideWMTT()
        {
        wmtt.style.display = "none";
        }
//-->
</script>

Das ist eigentlich das Haupt-(Java)-Script, es beinhaltet 3 Funktionen:

1. updateWMTT(e):

diese Funktion wird bei jeder Mousezeigerbewegung angekickt. Es ermittelt die aktuelle Position des Mousezeigers und schiebt die "Ausgabeeinheit" immer brav hinter dem Mousezeiger hinterher. Damit klebt der Text oder die Grafik am Mousezeiger.

2. showWMTT(id,plx,ptx):

Diese Funktion holt die Grafik oder den Text aus dem Hintergrund, indem sie den Style von "display:non" auf display"block" setzt. "id" ist die ID der Grafik/des Textes aus dem HTML-Quelltext, mit "plx" und "ptx" können zusätzliche Werte übergeben werden, die den Abstand des anzuzeigenden Elementes zum Mousezeiger bestimmen. Damit ist es durch Eingaben negativer Werte möglich, das Objekt auch mal links vom Mousezeiger einzublenden, wenn sich der Link z.B. am rechten Bildschirmrand befindet.

3. function hideWMTT():

hebt die Anzeige wieder auf, wenn die Mouse den link verläßt.

Das Stylesheet

<style type="text/css">
<!--
.tooltip {
        padding:5px;
        position: absolute;
        display: none;
        background-color:#FFFFFF;
        font-size:11px;
        font-weight:bold;
        border:1px solid black;
}
-->
</style>

formatiert nur die optische Ausgabe und kann nach eigenen Vorstellungen beliebig geändert werden
Die Map:

<map name="sky">
<area shape="rect" href="#" coords="224,126,456,319" id="test" title="Wenn Javascript dekativiert ist steht hier einfach nur ein normaler Text." onmouseover="showWMTT('XX',10,-200)" onmouseout="hideWMTT()">
</map>

Ich habe im Beispiel eine Map gewählt, weil die Fragestellung damals so war. Letztendlich ist es aber egal, es kann auch ein ganz normaler Link sein. Wichtig ist, daß mouseover und mouseout definiert sind. Es würde also auch so funktionieren:

[url='irgendeineseite.html']Irgendeine Seite[/url]

Wichtig dabei ist nur, daß eine ID mit übergeben wird, hier ist "XX" (siehe gleich in den weiteren Erklärungen). Die Werte 10 und -200 sagen übrigens aus, wo sich die linke obere Ecke des Elementes aus sicht des Mousezeigers befinden soll: 10 Pixel rechts neben dem Mouszeiger und 200 Pixel darüber. Probiere einfach aus, was zu deiner HP am besten paßt.

Das Herzstück der eigentlichen Anzeige befindet sich zwischen diesen Div-Tags:

<div class="tooltip" id="XX">Mit solch einem Shuttle ist dieser
Satelit ins Orbit gebracht worden.


[img]spacecrafts_003.jpg[/img]


<center style="color#FF0000">... und Text unter dem Bild
geht nat&uuml;rlich auch noch ;-)




und noch ein Bild....
[img]space_51.jpg[/img]</center></div>
</body>

Dort kannst du alles eingeben, was du möchtest - jedes HTML ist möglich. Theoretisch können da sogar Iframes und andere Scripte rein (hab ich allerdings noch nicht ausprobiert). Wichtig ist eine einmalig vorkommende ID für das DIV.
Tag-IDs sind übrigens immer einmalig, im Gegensatz zu Tag-Namen. Die Klasse "tooltip" ist insofern wichtig, daß das Element beim Laden gleich erstmal ausgeblendet wird. Du kannst natürlich auch einen entsprechenden Style "display:none" direkt mit in den Tag schreiben.

Was fehlt noch?

Wie du siehst befindet sich im Map-Link ein Title "Wenn Javascript deaktiviert ist ....". Dieser Titel würde das anzuzeigende Element überlagen. Man könnte ihn einfach weglassen - hat dann aber nichteinmal die normalen Titel-Tooltips, falls Javascript deaktiviert ist. In meinem Beispiel ist es ein Ersatz bei abgeschaltetem Javascript. Da wir es aber nur dann haben willen, steht am Schluß des Quelltext dieses Javascript:

<script type="text/javascript" language="JavaScript">
<!--
 document.getElementsByTagName("area")[0].title = "";
//-->
</script>

Es klaut dem Link das normale Tooltip, sobald Javascript aktiviert ist. Das Script steht übrigens am Schluß des Quelltextes, da es erst ausgeführt werden kann, wenn die Seite geladen wurde - man hätte das natürlich auch mit einer OnLoad-Funktion erreichen können.
Ich habe auf den Link in dem Fall mit seinem Tag-Namen zugegriffen, man könnte natürlich auch die ID ansprechen. Ich habe das Script aber auf einer meiner HPs im Einsatz und da befinden sich locker 40 verschiedene kleine Grafiken, welche bei Mousover angezeigt werden. In dem Fall habe ich das Titel-Klau-Script als Schleife ausgelegt und lösche in einem Zug alle Titel-Tags.

So, ich hoffe das war einigermaßen verständlich?

G.a.d.M,

Ronald

Zitat von Anonymous

vielen vielen dank!

super erklärung ronald!!

Ich glaub, ich werde meinen Nick mal ändern:

$Nick = array("Ronald" => "Erklärbär")

*fg*

Ronald

jo würde gut passen