Ergebnis 1 bis 8 von 8

Thema: Überbild

  1. #1
    Meister(in)
    Registriert seit
    25.04.2005
    Ort
    Wuppertal
    Beiträge
    277
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Überbild

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dies soltest du per Javascript und CSS erreichen. Lese sich dazu etwas in die Thematik DTML & CSS ein. Beides liefert reichlich google-Suchergebnisse.
    "Carpe Diem" powered by positiv Feelings

  3. #3
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

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

    Fragt...

    Ronald

  4. #4
    Meister(in)
    Themenstarter

    Registriert seit
    25.04.2005
    Ort
    Wuppertal
    Beiträge
    277
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @Ronald

    Genau sowas...

    Kannste mir noch bitte den code geben????

  5. #5
    Kaiserliche Hoheit
    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 :P
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Meister(in)
    Themenstarter

    Registriert seit
    25.04.2005
    Ort
    Wuppertal
    Beiträge
    277
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  8. #8
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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:
    Code:
    <html>
    <head>
    <title>Tooltips</title>
    <script type="text/javascript" language="JavaScript">
    <!--
    wmtt = null;
    pl = 0;
    pt = 0;
    
    document.onmousemove = updateWMTT;
    
       function updateWMTT&#40;e&#41;
            &#123;
            x = &#40;document.all&#41; ? window.event.x + document.body.scrollLeft&#58; e.pageX;
            y = &#40;document.all&#41; ? window.event.y &#58; e.pageY;
            if &#40;wmtt != null&#41;
               &#123;
               wmtt.style.left = &#40;x + pl&#41; + "px";
               wmtt.style.top  = &#40;y + pt&#41; + "px";
               &#125;
            &#125;
    
       function showWMTT&#40;id,plx,ptx&#41;
            &#123;
            pl = plx;
            pt = ptx;
            wmtt = document.getElementById&#40;id&#41;;
            wmtt.style.display = "block"
            &#125;
    
       function hideWMTT&#40;&#41;
            &#123;
            wmtt.style.display = "none";
            &#125;
    //-->
    </script>
    
    <style type="text/css">
    <!--
    .tooltip &#123;
            padding&#58;5px;
            position&#58; absolute;
            display&#58; none;
            background-color&#58;#FFFFFF;
            font-size&#58;11px;
            font-weight&#58;bold;
            border&#58;1px solid black;
    &#125;
    -->
    </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&#40;'XX',10,-200&#41;" onmouseout="hideWMTT&#40;&#41;">
    </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 ;-&#41;
    
    
    und noch ein Bild....
    [img]space_51.jpg[/img]</center></div>
    </body>
    <script type="text/javascript" language="JavaScript">
    <!--
     document.getElementsByTagName&#40;"area"&#41;&#91;0&#93;.title = "";
    //-->
    </script>
    </html>
    Have fun

    Ronald

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •