mouseover - verlinkung

  • Hallo.


    Ich möchte einzelne Schlagwörter in einem Text innerhalb der einzelnen Kapitelseiten mit Begriffen einer Glossar.html verlinken.


    Die Glossarbegriffe sind bislang wie folgt eingebunden.


    <a name="glossar brandung"><h4>Brandung</h4></A>
    <p>Text</p>


    Den "einfachen Link" in den Hauptkaiteln über:


    <p>Seit je her werden <a href="12_00_Glossar.html#glossar buhne" target="_blank">Buhnen</a> gebaut, um den Küstenabbruch zu verhindern oder zumindest zu verzögern. bla bla bla
    </p>


    Nun fände ich es schöner, wenn sich beim Überfahren des Stichwortes "Buhne" im Haupttext ein kleines Fesnter öffnet, welches nur die Erklärung für den entsprechenden Begriff enthält.


    Daher meine beiden Fragen.


    1. Wie realisiere ich einen popup/mousover?
    2. Wie muss ich mein Glossar "umstricken, damit nur die Begrifferklärung erfolgt und nicht das komplette Glossar geöffnet wird?


    Danke Euch
    sunshine

  • genau so stelle ich mir das vor... (oder per Klick, das ist egal, wobei es so wie bei "winfuture" eleganter ist)


    Aber, die Definition möchte ich nicht in jedem Quelltext der Einzelkapitel hinterlegen. Daher soll eine Link zum Glossar die Definition "heranziehen"

  • also das "heranziehen" stelle ich mir vor, dass durch einen verweis wie bspw. a href="12_00_Glossar.html#glossar buhne" der Textabschnitt aus dem Bereich "glossar buhne" der Glossar.html in der Sprechblase, die im Hauptext in z. B. der Bauwerke.html existiert, erscheint, ohne dass ich den kompletten Definitionstext in die Bauwerke.html neu eingeben muss.


    Vielleicht ist es ja auch nur reine Bequemlichkeit, dann mach ich es so wie bei dir (.swf etc.)


    Versuche gerade deinen Qelltext zu verstehen...aber kannst du das Vorgehen vielleicht für "Dummies" noch mal erläutern,


    danke

  • kann ich :lol:


    die CSS-Eingabe in der entsprechenden Datei:


    Code
    a.info {text-decoration:underline;color:green;font-weight:normal;}
    a.info:hover {text-decoration:none; color:green;}
    a.info span {visibility:hidden;position:absolute;padding:3px;font-weight:normal;}
    a.info:hover span {visibility:visible;border:3px double #2F2F2F;color:#2F2F2F;background:url(images/_back023c.jpg);font-size:10pt;color:#0000BF;}



    Die Eingabe im HTML-Text zur genannten '.swf'-Definition:


    Code
    Das hier gezeigte Video wurde vom Aufnahmeformat <b>mpg</b> in's <b>Video-Format</b> <a class="info" href="#"><b>.swf</b><img src="../images/fiblase02.gif" width="13" height="13" border="0" alt=""><span style="text-align:left;left:10pt;margin-top:-20pt;" class="info"><img src="../images/fiblase01.gif" width="32" height="32" border="0" alt=""><b><u>S</u>hock<u>w</u>ave <u>F</u>lash:</b><br>abspielbare Adobe-Flash-Animationen</span></a>


    Das würde jetzt genau meinem Eintrag in der genannten Seite entsprechen... ggf. also dort noch einmal versuchen an der Optik her nachzuvollziehen.


    Oder eben neu nachfragen :lol:


    EDIT: das href="#" musst du mit der Raute schreiben, wenn kein tatsächlicher Verweis geschrieben werden soll. Lässt du das leer, wird der Browser eine Anwahl versuchen.


    Aber Achtung:
    Internet Explorer erkennt diesen hover-Effekt erst ab Version 7...wie sollte es anders sein :wink:


    Persönlich nehme ich allerdings wenig Rücksicht darauf, da solch eine Anzeige nicht unbedingt 'lebensnotwendig' für die gesamte Seitenanzeige und -Nutzung ist, alle anderen Browser wie FF, Opera, Safari damit umgehen können.
    Wer eben immer noch mit nicht aktuellen Mumien-Browsern im Netz unterwegs ist, verpasst - abgesehen von der Sicherheit - dann halt einige Dinge

  • danke, dass hat soweit alles gut geklappt und mein layout habe ich auch anpassen können.


    allerdings verläuft mein Unterstricht im Haupttext zu lang und befindet sich auch hinter dem Schlagwort. ("_gebaut") . Muss ich den "hover"-Bereich verkleiner oder wei bekomme ich den "Schnipsel" weg. (ps. ich kann die Adresse der HP nicht nennen, da sie noch ncith online ist)


    Quelltext:


    <p>Seit jeher
    <a class="info" href="#"><b>Buhnen</b><img src="../bilder/info.jpg" width="8" height="14" border="0" alt="">
    <span style="text-align:left;left:160pt;margin-top:-20pt;" class="info"><img src="../bilder/info.jpg" width="15" height="26" border="0" alt="">
    Senkrecht zum Ufer in ein Gewässer vorgebautes Uferschutzwerk aus Busch, Holz, Stein, Stahlbeton oder Asphalt. Buhnen haben den Zweck, die Strömung des Wassers vom Ufer abzuweisen, auf die Wasserbewegung beruhigend zu wirken und das Absetzen der im Wasser befindlichen Feststoffe (Schlick, Sand) zu fördern. Das in das Ufer eingebundene landseitige Ende der Buhne heißt Buhnenwurzel, der wasserseitige vordere Teil Buhnenkopf. Zwischen zwei benachbarten Buhnen liegende Strand- oder Wattflächen werden Buhnenfelder genannt.</span></a>
    gebaut, um den K&uuml;stenabbruch zu verhindern oder zumindest zu verz&ouml;gern. Eine entscheidende Verminderung des K&uuml;stenr&uuml;ckganges ist durch Buhnen der unterschiedlichsten Bauformen nicht erreicht worden. <br><br>
    Es k&ouml;nnen durchaus Anfangserfolge durch den Bau von Buhnen eintreten, die jedoch in der Folgezeit wieder verschwinden. Die Berechnungen, die f&uuml;r den Mittelteil von Sylt einen etwas verringerten K&uuml;stenabbruch ergeben, enthalten s&auml;mtlich einen oder mehrere der folgenden Fehler: <br>
    </p>



    css.


    a.info {text-decoration:underline;color:green;font-weight:normal;}
    a.info:hover {text-decoration:none; color:green;}
    a.info span {visibility:hidden;position:absolute;padding:2px;font-weight:normal;}
    a.info:hover span {visibility:visible;border:1px double #2F2F2F;color:#2F2F2F;background-color:#9999FF;font-size:10pt;color: #000066;}

  • ich habe deine Eingabe mal kurz in meinem Editor nachvollzogen, und mit dem folgenden Eintrag war die Ansicht absolut OK


    musst bei dir natürlich die beiden image-Dateien
    <img src="../bilder/info.jpg" width="8" height="14" border="0" alt="">
    und
    <img src="../bilder/info.jpg" width="15" height="26" border="0" alt="">
    fortlassen
    :lol:
    denn ich schrieb ja, dass meine Vorgabe sich voll auf die Ansicht in meiner Seite bezog... musst du dann ggf. mit eigenen Grafiken vornehmen


    [Blockierte Grafik: http://www.pg-private-line.de/dateien/smily_thumbup.gif]

  • sorry, es sind ein paar tage vergangen....


    die image-dateien hatte ich natürlich gleich als erstes ersetzt ;)


    der verlängerte Unterstricht bleibt leider aber, so dass ich text-decoration: underline nun einfach nur in text-decoration: none ersetze habe.


    also nochmals danke,
    sunshine

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!