Grafiken beim Überfahren mit der Maus highlighten

[confector]

"Wie erreiche ich, dass Grafiken beim Überfahren mit der Maus gehighlighted werden?
[...]Definieren Sie zunächst für das gewünschte Element eine Seite Hintergrundgrafik. Mit der Seite Pseudoklasse :hover definieren Sie nun die zweite Grafik als Hintergrundbild."

Das habe ich aus dem FAQ, habs mir auch schon durchgelesen.
Nun habe ich einproblem mit der Pseudoklasse :hover, auf der Seite zu welcher gelinkt wird wird nur beschrieben wie man den hover effekt bei Textlinks einsetzt, jedoch nicht wie man das Bild ausblended damit das Hintergrundbild, welches wie im FAQ beschrieben als Hintergrund des Tabellenfeldes eingefügt worden ist.

Sorry für die wahrscheinlich schon tausendmal gestellte noob-Frage! :-$
gruß
confector

[Engin]

Hi confector,

Nun habe ich einproblem mit der Pseudoklasse :hover, auf der Seite zu welcher gelinkt wird wird nur beschrieben wie man den hover effekt bei Textlinks einsetzt, jedoch nicht wie man das Bild ausblended damit das Hintergrundbild, welches wie im FAQ beschrieben als Hintergrund des Tabellenfeldes eingefügt worden ist.

Was ist denn dein Ziel?
Du bindest ein Hintergrundbild  für den "normal" zustand ein, und ein Hintergrundbild für den :hover zustand ein.

kombinierst das ganze sowie z.b. hier beschrieben und Fertig.

Grüße,
Engin
 GYRO

[confector]

Danke erstmal für die schnelle antwort, so eine mit CSS erstelle Navigationsleiste hatte ich auch schon.
Jedoch will ich das, wenn man mit der maus über das bild (durch <img> in eine <td> eingefügt) fährt ein anderes Bild (durch <td background="URL"> eingefügt) erscheint.

[Tim Tepaße]

Hallo,

Jedoch will ich das, wenn man mit der maus über das bild (durch <img> in eine <td> eingefügt) fährt ein anderes Bild (durch <td background="URL"> eingefügt) erscheint.

Warum möchtest Du das? CSS ist doch viel entspannter, man nutzt nur noch strukturelles Markup statt nicht valider und vor allem unflexibler background-HTML-Attribute.

Deine Problemstellung ist etwas anders als bei meinem ersten Versuch, Dir zu helfen, aber gut, wenn Du es so willst. Dein Quellcode sieht anscheinend so aus:

<td background="bild-b.png"><img src="bild-a.png" alt="..."></td>

D.h. das Default-Bild wird durch das img-Element definiert und überlagert das Hintergrundbild. Ich würde erstmal kurz aufräumen und das beknackte background-Attribut in CSS verlagern:

HTML:
  <td id="nav"><img src="bild-a.png"></td>

CSS:
  ~~~css td#nav {
    background-image:url(bild-b.png);
  }

  
Effektiv ist dann alles noch, was übrig bleibt zu definieren, dass ...  
  
  wenn der Mauszeiger über der Tabellenzelle schwebt ...  
  ... das Bild in der Tabellenzelle ausgeblendet wird.  
  
Du suchst also nach einem Selektor, der auf ein img-Element passt, das sich in einer Tabellenzelle befindet, auf die die Pseudoklasse :hover wirksam wird. Und dazu nutzt Du einfach den [Nachfahrenselektor](http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente):  
  
  ~~~css
td#nav:hover img {  
    visibility:hidden;  
  }

Ich nutze hier die Deklaration visibility:hidden statt display:none, da bei visibility der vom Bild eingenommene Platz immer noch eingenommen wird, wenn das Bild nicht mehr angezeigt wird. Anders als bei display:none ändert sich die Tabellenzelle sich also in der Größe - manchmal ist das durchaus praktisch.

Tim

[confector]

Das ganze funktioniert zwar, jedoch verschwindet mit dem img auch der Link, also es ist nicht mehr die gesammte Fläsche der TD anklickbar sondern nur noch ein sehr kleiner Bereich...
Wie lässt sich das umgehen?

[Tim Tepaße]

Hallo,

Das ganze funktioniert zwar, jedoch verschwindet mit dem img auch der Link, also es ist nicht mehr die gesammte Fläsche der TD anklickbar sondern nur noch ein sehr kleiner Bereich...

Es wäre sehr viel hilfreicher, würdest Du einfach mal am Anfang den betreffenden Quellcode posten. Von dem Link hör ich zum ersten Mal. Allerdings kann ich Dein geschildertes Problem so nicht nachvollziehen. Ich habe folgende HTML-Struktur:

~~~html <table>
    <tr>
      <td><a href="http://google.de"><span>Dingsbums</span></a></td>
    </tr>
  </table>

  
Die Rollen Deines Bildes spielt hier das Inline-Element span. Darauf dieses CSS angewandt, in dem ich das Hintergrundbild durch Hintergrundfarbe ersetze, weil ich gerade keines zur Hand habe:  
  
  ~~~css
td {  
      border:1px solid black;  
      width:100px;  
      height:100px;  
      padding:0;  
  }  
  
  td a {  
      display:block;  
      margin:0;  
      padding:0;  
      height:100%;  
      background-color:red;  
  }  
  
  td a span {  
      display:block;  
      width:100%;  
      height:100%;  
      background-color:green;  
  }  
  
  td:hover span {  
      visibility:hidden;  
  }

Beachte wie ich explizit dem Link und dem span im Link sage, dass sie Blockelemente sind und bitteschön 100% der zur Verfügung stehenden Breite und Höhe einnehmen sollen. a, span und img sind Inline-Elemente, die sind normalerweise recht klein. Wenn man will, dass sie allen Platz der Tabellenzelle einnehmen muss man ihnen das sagen.

Kleine Warnung: Das, was ich hier mit width und height für span mache, gilt nicht für Dein Bild. Im Gegensatz zu einem Textelement hat dieses ja schon die passende Größe.

Tim

[confector]

OK, sry, habe gedacht ich hätte den Link erwähnt..
Hier der relevante Teil meines Quellcodes:

<style type="text/css">
  td#navidea {
    background-image:url(img/idea2.gif);
  }
  td#navidea:hover img {
    visibility:hidden;
  }
</style>
<body>
[...]
  <td width="100" id="navidea">
    <a href="data/idea.html">
      <img src="img/idea.gif" border="0" alt="">
    </a>
  </td>
[...]
</body>

wie ich das mit mit dem ausdehnen mache hab ich nich ganz verstanden^^

[Engin]

Hi confector,

Jedoch will ich das, wenn man mit der maus über das bild (durch <img> in eine <td> eingefügt) fährt ein anderes Bild (durch <td background="URL"> eingefügt) erscheint.

Ich weiss nicht, ob das, was du willst in kombination mit background: :hover funktioniert,
mit Javascript geht es zumindest ohne background:.

Grüße,
Engin
 GYRO

[Tim Tepaße]

Hallo,

Nun habe ich einproblem mit der Pseudoklasse :hover, auf der Seite zu welcher gelinkt wird wird nur beschrieben wie man den hover effekt bei Textlinks einsetzt, jedoch nicht wie man das Bild ausblended damit das Hintergrundbild, welches wie im FAQ beschrieben als Hintergrund des Tabellenfeldes eingefügt worden ist.

Du brauchst im wesentlichen zwei CSS-Regeln: eine die für Tabellenzellen wirksam wird, eine die für Tabellenzellen wirkt, über denen der Mauszeiger schwebt. Die erste ist einfach:

~~~css td {
    background-image:url(bild-a.png);
  }

  
Der Element-Selektor „td“ wirkt auf alle Tabellenzellen. Du willst nun eine speziellere Regel haben, die nur auf Tabellenzellen wirksam wird, die gerade den Status Hover haben. Dass Du dazu die Pseudoklasse „:hover“ nutzten kannst, weisst Du ja schon. Und hier geschieht das einfach wie bei den Textlinks: Man kombiniert Element-Selektor und Pseudoklasse einfach dadurch, dass man sie ohne Leerzeichen aneinander schreibt:  
  
  ~~~css
td:hover {  
    background-image:url(bild-b.png);  
  }

Und schon hast Du eine unterschiedliche Regel, in die Du reinschreiben kannst was Du willst, eben auch ein anderes Hintergrundbild.

Das Prinzip „Selektoren spezifischer machen durch Kombinieren mit anderen Selektoren“ gilt praktisch bei allem:

• Element-Selektor für <h1> kombiniert mit Klassen-Selektor (.klasse): h1.buchtitel
• Element-Selektor für <a> kombiniert mit Attribut-Selektor ([attribut]): a[href]
• Element-Selektor für <img>, kombiniert mit ID-Selektor: img#logo
• Universal-Selektor, kombiniert mit Pseudo-Klasse :target, die auf Elemente zeigt, die per Anker angesprungen sind: *:target

Und man kann dieses Kombinieren beliebig lang machen:

input[type=text]#vorname:lang(de):focus selektiert das Input-Element, das ein Texteingabefeld ist, die ID „vorname“ hat, als Sprache deutsch und dies auch nur, wenn es gerade ausgewählt ist. Ein konstruiertes Beispiel, ja.

Aber dieses Aufbauen von simplen Selektoren (und das spätere Kombinieren von solch simplen Selektoren zu komplexen Selektoren [Das sind z.B. der Nachfahren-Selektor (ul#navigationsliste > li.abschnitt)]) ist eines der wesentlichen Dinge, die man an CSS verstanden haben sollte, auch wenn es hier recht theoretisch klingt. Man braucht es immer wieder und nur dieses lässt einen recht effizient werden, so dass man nicht den HTML-Quelltext aufblähen muss.

Tim