1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Link soll sich bei offener Seite ändern

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von Sascha_77, 15. April 2006.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Sascha_77

    Sascha_77 Grünschnabel

    Hi Folx.

    Habe folgendes Problem:

    Ich habe eine Seite die mittels Frames in 3 Bereich aufgeteilt ist. Oben einen Frame der über die gesamte Breite geht. Dann in der 2. Zeile links eine Schmale Navigationsleiste mit den Entsprechenden links. Und Rechts davon eben der Bereich wo die Inhalte ausgegeben werden sollen. Jetzt möchte ich das wenn man auf einen link klickt und dieser sich dann rechts öffnet, das der link in der Navileiste solange kursiv dargestellt wird, bis der Benutzer wieder aus diesem link raus ist. Wie kann ich das am besten machen?

    Greetz
    Sascha
  2. Maik

    Maik Gast

    Vielleicht hilft dir folgender CSS- und Javascript-Code weiter, der in dem Navigations-Frame eingesetzt wird:

    Code (HTML5):
    1.  
    2. <style type="text/css">
    3. <!--
    4. a.nav, a.clicked {
    5. font-style: normal;
    6. }
    7.  
    8. a.nav:hover, a.clicked {
    9. font-style: italic;
    10. }
    11. -->
    12.  
    13. <script type="text/javascript">
    14. <!--
    15. function aktivieren(strHref)
    16. {
    17.    if(document.getElementById)
    18.        {
    19.            for(i=0;i<document.links.length;++i)
    20.                {
    21.                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
    22.                        {
    23.                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
    24.                        }
    25.                }
    26.        }
    27. }
    28. //-->
    Code (HTML5):
    1.  
    2. <a class="clicked" href="#link1" onclick="aktivieren(this.href)" target="NameDesFrames">Link 1</a>
    3. <a class="nav" href="#link2" onclick="aktivieren(this.href)" target="NameDesFrames">Link 2</a>
    4. <a class="nav" href="#link3" onclick="aktivieren(this.href)" target="NameDesFrames">Link 3</a>
    5.  
  3. Sascha_77

    Sascha_77 Grünschnabel

    Danke für die schnelle antwort. Aber irgendwie krieg ich das nicht ganz hin. Ich häng mal den Quelltext hintendran:

    HTML:
    1. <?xml version="1.0" encoding="iso-8859-1"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3.  
    4. <html xmlns="http://www.w3.org/1999/xhtml">
    5.  
    6.     <head>
    7.         <style type="text/css">
    8.         p,h3,h1 { line-height:5px; }
    9.         <!--.nicht_unterstrichen { text-decoration:none;}-->
    10.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    11.         <meta name="generator" content="Adobe GoLive" />
    12.         <title>Navigation</title>
    13.     </style>
    14.         <title>Navigation</title>
    15.     </head>
    16.         <body background="images/hintergrund.gif" bgcolor="#ffc998" link="#3b0707" vlink="black" leftmargin="0" marginwidth="0">
    17.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="index.html" target="_top"><font size="3">Home</font></a></p>
    18.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="produkte.html" target="navigation"><font size="3">Produkte</font></a></p>
    19.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="zuechter.html" target="text"><font size="3">Z&uuml;chter</font></a></p>
    20.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="formular.html" target="text"><font size="3">Formulare</font></a></p>
    21.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="hund/hund.html" target="text"><font size="3">Konditionen</font></a></p>
    22.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="cgi-data/newsletter/abo_form.html" target="text"><font size="3">Newsletter</font></a></p>
    23.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="cgi-bin/sitesearch.php.cgi" target="text"><font size="3">Suche</font></a></p>
    24.         <p><font size="3" color="#ffc998">..</font><font size="3" color="#ffffcc"><a class="nicht_unterstrichen" href="cgi-bin/guestbook.php.cgi" target="text">G&auml;stebuch</a></font></p>
    25.         <p><font size="3" color="#ffc998">..</font><a class="nicht_unterstrichen" href="impressum.html" target="text"><font size="-2">Impressum</font></a><font size="3"> </font><font size="-2">/</font><font size="3"> </font><a class="nicht_unterstrichen" href="agb.html" target="text"><font size="-3">AGB</font></a></p>
    26.         <p><font color="#ffffcc"><img src="images/maus.gif" alt="" usemap="#mausc05d72d3" align="left" border="0" /><map name="mausc05d72d3"><area shape="circle" coords="66,45,4" href="admin/admin.html" alt="" target="navigation" /></map></font></p>
    27.     </body>
    28.  
    29. </html>
  4. Maik

    Maik Gast

    Probiere es mal mit diesem Quelltext:

    Code (HTML5):
    1.  
    2. <?xml version="1.0" encoding="iso-8859-1"?>
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    7. <meta name="generator" content="Adobe GoLive" />
    8. <title>Navigation</title>
    9.  
    10. <style type="text/css">
    11. p,h3,h1 { line-height:5px; }
    12.  
    13. a.nav, a.clicked {
    14. font-style: normal;
    15. }
    16.  
    17. a.nav:hover, a.clicked {
    18. font-style: italic;
    19. }
    20.  
    21. <script type="text/javascript">
    22. function aktivieren(strHref)
    23. {
    24.     if(document.getElementById)
    25.         {
    26.             for(i=0;i<document.links.length;++i)
    27.                {
    28.                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
    29.                        {
    30.                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
    31.                        }
    32.                }
    33.        }
    34. }
    35.  
    36. </head>
    37. <body background="http://www.tutorials.de/forum/images/hintergrund.gif" bgcolor="#ffc998" link="#3b0707" vlink="black" leftmargin="0" marginwidth="0">
    38.         <p><font size="3" color="#ffc998">..</font><a class="clicked" href="index.html" target="_top"><font size="3">Home</font></a></p>
    39.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="produkte.html" target="navigation"><font size="3">Produkte</font></a></p>
    40.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="zuechter.html" target="text"><font size="3">Z&uuml;chter</font></a></p>
    41.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="formular.html" target="text"><font size="3">Formulare</font></a></p>
    42.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="hund/hund.html" target="text"><font size="3">Konditionen</font></a></p>
    43.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="cgi-data/newsletter/abo_form.html" target="text"><font size="3">Newsletter</font></a></p>
    44.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="cgi-bin/sitesearch.php.cgi" target="text"><font size="3">Suche</font></a></p>
    45.         <p><font size="3" color="#ffc998">..</font><font size="3" color="#ffffcc"><a class="nav" href="cgi-bin/guestbook.php.cgi" target="text">G&auml;stebuch</a></font></p>
    46.         <p><font size="3" color="#ffc998">..</font><a class="nav" href="impressum.html" target="text"><font size="-2">Impressum</font></a><font size="3"> </font><font size="-2">/</font><font size="3"> </font><a class="nav" href="agb.html" target="text"><font size="-3">AGB</font></a></p>
    47.         <p><font color="#ffffcc"><img src="http://www.tutorials.de/forum/images/maus.gif" alt="" usemap="#mausc05d72d3" align="left" border="0" /><map name="mausc05d72d3"><area shape="circle" coords="66,45,4" href="admin/admin.html" alt="" target="navigation" /></map></font></p>
    48.  
    49. </body>
    50. </html>
  5. Sascha_77

    Sascha_77 Grünschnabel

    Hmmm das ist nicht der gewünschte effekt. Zumal jetzt auch alle Links wieder unterstrichen sind. Das war ja vorher nicht so. Hatte ich mittels decoration-text none abgestellt. Und jetzt änder sich nur der link in Kursiv wenn ich mit der maus drüberfahre.

    Gut wäre aber, wenn der link solange kursiv bleibt bis der User auf einen anderen link drückt.
  6. Maik

    Maik Gast

    Also, die Textunterstreichung kannst du selbstverständlich noch deaktivieren :rolleyes:

    Code (CSS):
    1.  
    2. a.nav, a.clicked {
    3. text-decoration: none;
    4. font-style: normal;
    5. }
    6.  
    7. a.nav:hover, a.clicked {
    8. text-decoration: none;
    9. font-style: italic;
    10. }
    11.  
    Und das Script funktioniert bei mir einwandfrei, will heißen, daß der Link der aktuell geöffneten Seite kursiv ist, und es so lange bleibt, bis der nächste Link aufgerufen wird.
  7. Maik

    Maik Gast

    Okay, habe den Fehler entdeckt: in den Links fehlt ja noch der erforderliche Event-Handler onclick="aktivieren(this.href)" ;)
  8. Sascha_77

    Sascha_77 Grünschnabel

    Ok. Jetzt klappt soweit alles. Das Problem ist nur, dass die links nicht kursiv bleiben. Habs jetzt mit Safari und Firefox probiert. Geht net. :(
  9. Maik

    Maik Gast

    Bitte lies meinen letzten Beitrag, den ich mit dir zeitgleich verfasst habe.
  10. Sascha_77

    Sascha_77 Grünschnabel

    Juhuuu. Nun macht er es so wie ich es gerne hätte. Vielen Dank. :D
  11. Maik

    Maik Gast

    Gern geschehen ;)
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen