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

A

alexkiener

Mitglied
Thread Starter
Dabei seit
18.05.2005
Beiträge
21
Reaktionspunkte
0
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ß
 
alexkiener schrieb:
a.navi { text formation etc. }

a.small_60 { background-image:url(../img/image.gif); }
a.small_60 { background-image:url(../img/image2.gif); }
Zum Vergrößern anklicken....

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); }
 
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:
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.
 
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.

?! :)
 
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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten