Überbild

Gigazone

Hallo,
Ich wollte wissen wie es geht das wenn man zum beispiel über ein bild geht das dann ein kleines fenster kommt....
Ich meine aber keinen link oder so sondern das sich solange wie ich über dem bild bin ein kleines fenster an meinem mauszeiger befindet...
Das habt ihr bestimmt schonmal gesen z.b. bei thottbot...

Hier sind bilder...

http://www.xplosion-gaming.de/a.bmp
http://www.xplosion-gaming.de/b.bmp
http://www.xplosion-gaming.de/c.bmp

Mit img geht ihrgendwie net...

Und man sieht da leider nicht meinen mauszeiger

Torty

Dies soltest du per Javascript und CSS erreichen. Lese sich dazu etwas in die Thematik DTML & CSS ein. Beides liefert reichlich google-Suchergebnisse.

Ronald

Moin!

Suchst du nun ein Javascript-Menü, oder so etwas -> http://web306.server3.webplus24.de/testseiten/tooltips

Fragt...

Ronald

Gigazone

Ronald

Genau sowas...

Kannste mir noch bitte den code geben????

Modula

Der steht doch - wenn ich das richtig sehe - unverschlüsselt im Quelltext - musst dir nur das was du brauchst rauskopieren, dein Copyright drunter setzen und das ganze bei eBay verticken

Ronald

Also das Copyright laß mal schön weg, ist ja nicht von dir (auch nicht von mir), das hat sich ganz jemand anderes ausgedacht und allgemein zur Verfügung gestellt.

Und was denn Quelltext betrifft: bedien dich einfach

G.a.d.M.

Ronald

Gigazone

OK danke nur wie mache ich es das egal wo ich mit dem mauszeiger bin der text kommt???

Ronald

Nun, im Script befinden sich drei Funktionen:

1. updateWMTT(e)
Diese Funktion verfolgt die Mousposition und zieht des Text-/Grafikfenster ständig hinterher.

2. showWMTT(id,plx,ptx)
Diese Funktion zeigt das text-/Grafikfenster an, wenn die Mous sich über den definierten bereich befindet (also bei Mousover). Das Mousover übergibt dabei drei Werte: a) die ID des anzuzeigenden "Layers", b) den horizentalen Abstand zum Mouszeiger und c) den vertikalen Abstand zum Mousezeiger: onmouseover="showWMTT('XX',10,-200)".
"XX" ist hier die ID des div-Tags, der linke Rand des Fenstes befindet sich 10 Pixel rechts vom Mousezeiger und der obere Rand 200 Pixel über dem Mouszeiger. Du kannst also jede beliebige Position bestimmen, wobei gilt: positive Zahlen bezeichnen die Position nach rechts oder nach unten, negative Zahlen nach links oder nach oben, immer gesehen vom Mousezeiger aus.

3. function hideWMTT()
schaltet die Anzeige durch onMouseout wieder aus, wenn der Linkbereich verlassen wird.

Alles klar?

Hier noch mal das komplette Script:

HTML

<html>
<head>
<title>Tooltips</title>
<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>


<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>
</head>
<body>
<center>[img]skylab.jpg[/img]</center>


<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>


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

Alles anzeigen

Have fun

Ronald