Tabellenhintergrundimage ändern (CSS) die 2. - wichtig!!

Dieses Thema im Forum "Web Page Design" wurde erstellt von alexkiener, 13.06.2005.

  1. alexkiener

    alexkiener Thread Starter MacUser Mitglied

    Beiträge:
    21
    Zustimmungen:
    0
    MacUser seit:
    18.05.2005
    Hi,

    nochmal kurz infos für alle:

    Ich habe eine Navigation über ne Tabelle aufgebaut, die 8 Kategorien hat und jeweils einen "normalen" zustand (image1.gif) einen hover (image2.gif) und einen active zustand haben (image3.gif).

    ich habe es soweit hinbekommen, den hover effekt und den normalzustand über CSS zu realisieren:

    Auszug:

    ...

    <td align="center" valign="bottom" width="61" height="20">
    <a class="navi small_60" href="sites/home.html">Home</a></td>

    <td align="center" valign="bottom" width="90" height="20">
    <a class="navi large_90" href="sites/priavte_anleger.html">Private Anleger</a></td>

    ...

    ich hab a eine klasse zugewiesen die in der css so aufgebaut ist:

    ...

    a.navi { text formation etc. }

    a.small_60 { background-image:url(../img/image.gif); }
    a.small_60 { background-image:url(../img/image2.gif); }

    das gleiche für "large_90" mit anderen images...

    soweit so gut, nun möchte ich gern das wenn man auf einen entsprechenden punkt in der Navigation klickt, das er ein active image anzeigt!
    wie mach ich das ? die einzelnen inhalte der jeweiligen seiten mach ich später mit includes, also muss es irgendwie mit "id`s" gemacht werden...

    hat jemand einen vorschlag ?

    Danke und gruß
     
  2. Tobias_Baus

    Tobias_Baus MacUser Mitglied

    Beiträge:
    43
    Zustimmungen:
    0
    MacUser seit:
    18.03.2005
  3. dms

    dms Gast

    Hast Du das :hover vergessen? So kann es eigentlich nicht funktionieren. Neben :hover gibt es noch die Pseudoklasse :active, welche Dir hier helfen sollte.

    http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

    a.small_60 { background-image:url(../img/image.gif); }
    a.small_60:hover { background-image:url(../img/image2.gif); }
    a.small_60:active { background-image:url(../img/image3.gif); }
     
  4. alexkiener

    alexkiener Thread Starter MacUser Mitglied

    Beiträge:
    21
    Zustimmungen:
    0
    MacUser seit:
    18.05.2005
    Hi,

    sorry hab zuwenig gespostet... das mit hover hab ich schon:

    a.small_60 { display: block; background-image:url(../img/small.png); }
    a.small_60:hover { display: block; background-image:url(../img/small_hover.png); }

    nun brauch ich wie gesagt was für den active zustand.
    das problem ist halt, woran erkennt die CSS das ich grade auf den Button "home" geklickt habe, und er nun ein anderes active image setzen soll.

    ich hab da nun eben den active bereich hinzugefügt:

    a.small_60:active { display: block; background-image:url(../img/small_active.png); }

    aber er behält den active zustand irgendwie nicht bei...

    Gruß
     
    Zuletzt bearbeitet: 13.06.2005
  5. dms

    dms Gast

    Ja, das :active bezieht sich nur auf die aktuelle Seite. Nach einem Seitenwechsel gillt das nicht mehr, auch wenn die URL's übereinstimmen sollten. Hier musst Du serverseitig (oder mit JS) was basteln.
     
  6. alexkiener

    alexkiener Thread Starter MacUser Mitglied

    Beiträge:
    21
    Zustimmungen:
    0
    MacUser seit:
    18.05.2005
    das doch kacke :)

    kann man nicht irgendwie ne ID in der CSS festlegen und dann wenn man die neue seite aufruft, sagt man der table - referenzier dich auf diese ID ? und in der CSS ist dann unter der ID der "normal" zustand halt das active img.

    ?! :)
     
  7. dms

    dms Gast

    Nur per JavaScript. So ungefähr:

    Code:
    <html>
       <head>
          <script type="text/javascript">
             function basename(url) {
                if(url.match(/\/([\w\.]*$)/i))
                   return RegExp.$1;
                return false;
             }
             
             function activate() {
                for(i=0;i<document.getElementsByTagName("a").length;i++) {
                   if(document.getElementsByTagName("a")[i].className.match(/navi/) && basename(window.location.href)==basename(document.getElementsByTagName("a")[i].href)) {
    
                      document.getElementsByTagName("a")[i].className+='small_60_active';
                   }
                }
             }
          </script>
          <style type="text/css">
             a.small_60 { 
                background-image:url(1.gif); 
             }
             a.small_60:hover { 
                background-image:url(2.gif); 
             }
             a.small_60_active { 
                background-image:url(3.gif);
             }
          </style>
       </head>
       <body onload="activate()">
          <table>
             <td align="center" valign="bottom" width="61" height="20">
                <a class="navi small_60" href="sites/home.html">Home</a>
             </td>
             <td align="center" valign="bottom" width="90" height="20">
                <a class="navi small_60" href="index.html">Private Anleger</a>
             </td>
          </table>
       </body>
    </html>
     
Die Seite wird geladen...

Diese Seite empfehlen