In einer HTML Tabelle vorhandenes Bild bei MouseOver ersetzen

[Bernd]

Hallo!

Hier mal die Erklärung was ich machen will -
Ich habe eine Liste in einer Tabelle (z.B. mit Spielen)
und nun sind in mehreren Zellen Bilder eingefügt.
Nun möchte ich, dass wenn ich über das Bild fahre, sich das Bild verändert in ein anderes Bild.
Mit dem beigefügten Code funktioniert das zwar - aber das 2. Bild (rot.jpg) setzt sich nur hinter das andere.
Um das zu verdeutlichen habe ich ein wesentlich größeres Rotes Bild genommen: Screenshot Beispiel

Habe folgende Codes:
in der index.html: [HTML]

<table border=2 bordercolor="#1E90FF">  
<tr>  
<th><img id="mw3" src=web_11_Dateien/mw3.png /></th>  
</tr>  
</table>  

und in der index.CSS: [CSS]

  
@charset "utf-8";  
/* CSS Document */  
  
#mw3 {  
	display: block;  
	background:inherit;  
}  
#mw3:hover {  
	background-image: url(web_11_Dateien/rot.jpg);  
	  
}  

Was muss ich tun, damit sich das Bild beim Hover über das andere setzt?

Liebe grüße,
Bernd

[JürgenB]

Hallo Bernd,

<th><img id="mw3" src=web_11_Dateien/mw3.png /></th>

Vordergrund ...

#mw3:hover {
background-image: url(web_11_Dateien/rot.jpg);

... und Hintergrund.

Gruß, Jürgen

[Bernd]

Hallo Bernd,

<th><img id="mw3" src=web_11_Dateien/mw3.png /></th>

Vordergrund ...

#mw3:hover {
background-image: url(web_11_Dateien/rot.jpg);

... und Hintergrund.

Gruß, Jürgen

Ja, stimmt!

Nun aber die Frage wie setze ich ein normales Bild? Anstatt "background" mit CSS?

Liebe grüße,
Bernd

[ChrisB]

Hi,

Nun aber die Frage wie setze ich ein normales Bild? Anstatt "background" mit CSS?

Nein, normales Bild nur mit dem img-Element.
Das wäre die eine Möglichkeit - beide Bilder im HTML notieren, und dann per CSS jeweils das eine oder andere sichtbar machen (display).

Oder es bei einem Bild im HTML belassen, und dann dessen Breite oder Höhe auf 0 setzen, und ihm ein entsprechendes padding geben, wo dann das Hintergrundbild angezeigt wird.

MfG ChrisB

[Marc]

Hallo,

zusätzlich zu dem, was Chris schon gesagt hat: vermeide es, Kurzschreibweisen und Langschreibweisen zu mischen (background und background-image)

Ich hege den leisen Verdacht, dass Du da keine Datentabelle gebaut hast, sondern eine Layout-Tabelle. Mach doch einfach eine CSS-Tabelle!

Bilder, die inhaltlich relevant sind, gehören ins HTML-Dokument. Verzierung und andere Bilder, welche keinen Inhalt transportieren, gehören ins CSS. Von daher kann ich mir keinen Fall vorstellen, in dem es Sinn macht, ein Vordergrund-Bild (müsste inhaltlich relevant sein) durch ein Hintergrundbild (sollte nur Schmuck am Nachthemd sein) zu ersetzen.

Entweder hat es eine inhaltliche Relevanz, dann Vordergrundbild durch Vordergrundbild ersetzen oder nicht - dann Hintergrundbild durch Hintergrundbild ersetzen.

Manchmal gibt es im realen Leben Beispiele, die nicht so klar voneinander zu trennen sind.

In Deinem Fall lassen sich sowohl Argumente für das Eine, wie für das Andere finden. Trotzdem solltest Du Dich entscheiden. Ich denke hier wäre es ok nur mit EINEM Vordergrundbildern zu arbeiten (macht die Sache auch einfacher).

Du wechselst ja in Deinem Screenshot nur die HintergrundFARBE...

Nimm ein teiltransparentes gif, dann brauchst Du nur noch background-color in Deinem CSS...

Viele Grüße,
Marc.

[Gunnar Bittersmann]

@@Marc:

nuqneH

Mach doch einfach eine CSS-Tabelle!

Würdest du auch erklären, was du damit meinst? 'display: table…'.

Nimm ein teiltransparentes gif, dann brauchst Du nur noch background-color in Deinem CSS...

Für die Art von Bild ist aber JPEG das richtige Format, da gibt es keine Transparenz.

Aber so geht’s: Das Bild (JPEG, nur das Innere ohne schwarzen/roten Rahmen und Schatten) wird mit 'border-radius' rund gemacht. Der Schatten (transparentes PNG-24, sonst Farbsäume) ist Hintergrundbild des Containers ('th'), schwarz bzw. rot dessen Hintergrundfarbe, bei ':hover' muss man lediglich diese umschalten.

Qapla'

[Marc]

Hallo,

@@Marc:

nuqneH

Mach doch einfach eine CSS-Tabelle!

Würdest du auch erklären, was du damit meinst? 'display: table…'.

Ja, aber Du weißt das doch. Wenn Bernd gefragt hätte, hätte ich es ihm auch erklärt.

Natürlich dazu noch mindestens display: table-cell, besser natürlich noch display: table-row um die Elemente, die sich wie Tabellen-Zellen verhalten sollen. Dafür würde ich aber kein zusätzliches Element wie DIV einfügen, es sei denn, die "Tabelle" soll mehrere Zeilen haben.

Nimm ein teiltransparentes gif, dann brauchst Du nur noch background-color in Deinem CSS...

Für die Art von Bild ist aber JPEG das richtige Format, da gibt es keine Transparenz.

Ich nehme gerne PNGs, gif ist natürlich Quatsch mit Soße...

Aber so geht’s: Das Bild (JPEG, nur das Innere ohne schwarzen/roten Rahmen und Schatten) wird mit 'border-radius' rund gemacht.

border-radius: 50% 50%;

Der Schatten (transparentes PNG-24, sonst Farbsäume) ist Hintergrundbild des Containers ('th'), schwarz bzw. rot dessen Hintergrundfarbe, bei ':hover' muss man lediglich diese umschalten.

Unter Umständen geht das (in modernen Browsern) auch mit radial gradients, habe ich aber noch nicht ausprobiert.

Wie immer gibt es mehrere Wege, oft sogar gleichwertig, manchmal passt die eine oder andere Vorgehensweise besser ins Gesamtkonzept - oder zur eigenen Arbeitsweise/Gewohnheit.

Viele Grüße,
Marc.