Tabellenhintergrundimage bei mouseover ändern (css)

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

  1. alexkiener

    alexkiener Thread Starter MacUser Mitglied

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

    also ich habe folgendes Problem.
    ich habe eine navigation gebaut die vom code so aussieht: (auszug)

    ...
    <!-- Navigation -->

    <tr>
    <td background="img/index_04.jpg" width="60" height="18">
    <div align="center">
    <span class="navi">Home</a></span></div>
    </td>
    </tr>

    ...

    nun möchte ich "home" mit einem link versehen und dabei das background image von <td> ändern lassen... aber nur wenn man mit der Maus drüber geht... also wenn ich mit der maus wieder runtergehe soll auch das alte bg-img wieder da sein.

    hat jemand ne ahnung wie das geht ?
    hab nit so viel ahnung von sowas, sorry.

    gruß und danke,

    alex
     
  2. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Irgendwo in deinem HTML fehlt ein <a href="[...]"[...]>. Ziemlich genau vor 'Home'. Zudem sieht das ganze recht - umständlich aus.

    Ja.

    Das basiert jetzt mal auf deinem Tabellenansatz, auch wenn ich Tabellen als Designkrücke nicht gut heißen kann:
    HTML:
    [...]
    <style type="text/css">
      .nav {
        background: url(normal.jpg);
        width: 60px;
        height: 18px;
        display: block;
        color: #fff;
        text-align: center;    
      }
    
    
      .nav:hover {
        background: url(hover.jpg);
      }
    </style>
    [...]
    
    <table>
      <tr>
        <td><a href="/" class="nav">Home</a></td>
      </tr>
    </table>
    
    Demo, HTML unvollständig und nicht valid!

    Matt
     
  3. alexkiener

    alexkiener Thread Starter MacUser Mitglied

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

    ok mitlerweile bin ich schon ein schritt weiter.

    ich habe die html (auszug) nun so aufgebaut:

    <!--

    <body id="home" (...) >
    <table id="navi" (...) >
    (...)
    <td>
    <a class="home_td" href="#">Home</a>
    </td>

    so... hab jeweils ne id für den body und für die table vergeben UND für die Tabellenzelle.

    meine CSS ist nun so aufgebaut:

    #navi a { ... }
    #navi a:link { ... }
    #navi a:hover { ... }
    #navi a:active { ... (background-image + styles) }

    #home #navi #home_td a,

    Ich habe eine Navigation mit 6 Kategorien, die jeweils verschiedene BG images bekommen wenn man mit der maus drüber fährt. (hover)
    also 2 verschiedene Bilder z.B. image.gif und image_hover.gif

    so ich bekomm es hin das z.B. die Zelle die ich mit der klasse "home_td" referenziert habe auch das tut was ich will, nämlich im normalem Zustand ein bestimmtes Bild anzeigt (im background) und wenn ich mit der Maus drüber fahre, bekommts das hover pic.

    WIE muss ich weitere Klassen anlegen damit ich für jede kategorie z.b. "links" (klasse links_td) eigene background images benutzen kann ?

    Ich habe für den body eine id vergeben und für die table, damit ich nacher die styles der navi ganz easy aus der css ändern kann...

    vielleicht hab ich da ein verständnisfehler oder meine Methode ist einfach *******e... gebt ma feedback wie ihr das machen würdet. ich will wie gesagt die navi textbasiert mit CSS aufbauen und lediglich im BG images verwenden, für jede kategorie verschiedene BG pics. ich hab kein plan wie das genau mit CSS geht, ich lern CSS grad erst deshalb bitte so einfach wie möglich erklären.

    Danke und gruß!!
     
  4. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Nein. Du hast eine ID für den <body>, eine für den <table> und eine Klasse für den <a>. Die Zelle hat gar nichts.

    home_td ist eine Klasse, die richtige Notation wäre folglich '.home_td'. Und <a> kann auch von der nichts erben. Also wenn überhaupt, dann 'a.home_td'.

    Ich hab mal mein Beispiel von gestern etwas aufgebohrt, hier gibt es das ganze am Stück als Demo.

    Die Styles sind im HTML integriert. Für die einfachere Pflege sollte man die natürlich auslagern.

    HTML:
    <style type="text/css">
      a.nav {
        width: 100px;
        height: 18px;
        display: block;
        text-align: center;    
        color: #fff;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      }
      
      a.home {
        background: url(red.gif) repeat-x 0px 0px;
      }
    
      a.home:hover {
        background: url(red.gif) repeat-x 0px -100px;
      }
    
    
      a.news {
        background: url(green.gif) repeat-x 0px 0px;
      }
    
      a.news:hover {
        background: url(green.gif) repeat-x 0px -100px;
      }
    
    
      a.projects {
        background: url(oliv.gif) repeat-x 0px 0px;
      }
    
      a.projects:hover {
        background: url(oliv.gif) repeat-x 0px -100px;
      }
    
    
      a.downloads {
        background: url(yellow.gif) repeat-x 0px 0px;
      }
    
      a.downloads:hover {
        background: url(yellow.gif) repeat-x 0px -100px;
      }
    
    
      a.contact {
        background: url(blue.gif) repeat-x 0px 0px;
      }
    
      a.contact:hover {
        background: url(blue.gif) repeat-x 0px -100px;
      }
    </style>
    
    a.nav nimmt die allgemeinen Einstellungen für die Navigationspunkte auf, wie Schriftart, Farbe, Größe und sonstiges zum Verhalten des Elements.
    Wenn die Hintergrundbilder so unterschiedlich sind, das du für verschiedene Punkte verschiedene Farben verwenden musst, um die Lesbarkeit sicherzustellen, muss z.B. die Farbanweisung in die speziellen Klassen, die es für jeden Link gibt.

    a.home definiert den normalen Zustand für den Home-Link, a.home:hover den Zustand beim Überfahren mit der Maus. Das selbe dann für alle anderen Navigationspunkte.

    Kleiner Unterschied zu gestern: Es wird nur noch ein Hintergrundbild für jeden Navigationspunkt benutzt und beim überfahren wird festgelegt, das er nur eine andere Stelle anzeigen soll. So werden Blitzer, wie im gestrigen Beispiel, wo das hover-Bild erst nachgeladen werden muss, vermieden.

    HTML:
     <table>
      <tr>
        <td><a href="" class="nav home">Home</a></td>
      </tr>
      <tr>
        <td><a href="" class="nav news">News</a></td>
      </tr>
      <tr>
        <td><a href="" class="nav projects">Projects</a></td>
      </tr>
      <tr>
        <td><a href="" class="nav downloads">Downloads</a></td>
      </tr>
      <tr>
        <td><a href="" class="nav contact">Contact</a></td>
      </tr>
    </table>
    Ich hab die Tabelle mal beibehalten, kann es aber nach wie vor nicht gutheißen.
    Jeder <a> hat zwei Klassen zugewiesen, zum einen .nav, mit den allgemeinen Anweisungen und zum anderen die für diesen Navigationspunkt spezielle Klasse mit dem Hintergrundbild.

    Das geht auch mit Klassen. Der Vorteil von ID's ist, dass du die auch als Sprunganker innerhalb der Seite verwenden kannst (<a href="#top">Zurück zum Anfang</a>), daraus ergibt sich eine wichtige Eigenschaft von ID's, nämlich das sie innerhalb einer Seite eindeutig sein müssen.

    Da body aber im HTML-Dokument nur einmal vorkommt, brauchst du ihm weder Klasse noch ID zuweisen, sondern kannst ihn direkt über 'body {}' ansprechen. Sinnvoll ist die Zuweisung von Klassen dann, wenn der body für verschiedene Seiten unterschiedlich aussehen soll.

    Bei Fragen bitte auf den Teil beziehen, den du nicht verstanden hast und nicht wieder neuen HTML-Code, der mit dem vorigen Posting nicht wirklich was zu tun hat, hier reinfeuern.

    Matt
     
  5. alexkiener

    alexkiener Thread Starter MacUser Mitglied

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

    danke schonmal - hat mir echt weitergeholfen -> habs hinbekommen, das einzige was ich nicht ganz verstanden hab, ist wie man diesen "Blitz" effekt wegbekommt. Einfach die Anweisung im body bzw. im Table tag geben, das er bilder vorladen soll ?

    gruß Alex
     
  6. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Der Blitz-Effekt sollte mit dem modifizierten Beispiel von heute nicht mehr auftreten.

    Matt
     
Die Seite wird geladen...

Diese Seite empfehlen