Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: link-hilfe

  1. #1
    Gast

    Standard link-hilfe

    Sry, weis nicht wie ich die überschrift formuzlieren sollte


    also, ich habe auf meiner homepage in einer tabelle ein paar zeilen in der pro zeile etwas anderes steht..


    ich möchte, so eine art link für das was in einer zeile drin steht, das sich ein kleines fenster öffnet (nicht popup) wo dann ein bild und text drinnen steht..
    screen im anhang..
    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 !!!!!
    Angehängte Grafiken Angehängte Grafiken

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

    Standard

    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

  3. #3
    Gast

    Standard

    ja sowas meine ich

    nur wp bekomme ich die stylesheet datei her?

    mfg

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

    Standard

    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

  5. #5
    Gast

    Standard

    kk vielen dank ronald!!!

    mfg

  6. #6
    Gast

    Standard

    achja..

    kannst du vll eine kleine erläuterung dazu schreiben?

    möchte nicht nur den fertigen quelltext haben sondern auch etwas lernen

  7. #7
    Gast

    Standard

    eins noch ^^

    wie funktioniert das bei hyperlinks??

    da geht das ja nur bei images.. oder?

    mfg

  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

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

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

    Standard

    Ohje - ich habs befürchtet

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


    Code:
    <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>
    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
    Code:
    <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>
    formatiert nur die optische Ausgabe und kann nach eigenen Vorstellungen beliebig geändert werden
    Die Map:
    Code:
    <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>
    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:
    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:
    Code:
    <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>
    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:

    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
     document.getElementsByTagName&#40;"area"&#41;&#91;0&#93;.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

  10. #10
    Gast

    Standard

    vielen vielen dank!

    super erklärung ronald!!

Ähnliche Themen

  1. Myspace Hilfe - Link verstecken
    Von Gast ;) im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 11.08.2009, 09:12
  2. Hilfe beim Link...
    Von blueberlin im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 25.11.2006, 12:23
  3. hilfe bei html link editieren
    Von timbu im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 16.11.2005, 01:40
  4. brauche Hilfe bei Link
    Von Judy im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.10.2004, 15:25
  5. Brauche Hilfe beim Link einbau!
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 03.08.2004, 21:59

Stichworte

Berechtigungen

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