HOVER in Tabellen mit wechselnden Bildern... geschlossen

[luzie]

Hallo zusammen,

ich möchte auf einer Page eine 3 X 3 Tabelle mit 9 Bildern einbauen: beim überziehen der einzelnen Felder soll sich dann in jedem Feld eine 2te Version des Bildes zeigen und einen Link auf eine neue Seite möglich machen...

Mit einem Bild habe ich das ja geschafft, aber beim Versuch "Katze" will es schon nicht mehr gehen. Hatte die einzelnen Tabellenzellen schon verschieden benannt, z.B.

#wechselX a {
background: url(lkatze2.jpg) ....

aber irgendwie geht das nicht.

Die Bildnamen sind natürlich nur Beispiele.

Hier das Skript:

table {
border-collapse:collapse;
}

td img {
display: block;
}

#wechsel a {
background: url([COLOR='Red']landschaft2.jpg[/COLOR]) no-repeat;
display:block; width:150px; height:150px;
}
#wechsel img {
display:block; width:150px; height:150px; border:0;
}
#wechsel a:hover img {
visibility: hidden;
}
#wechsel a:hover {
border:0;
}
* html #wechsel a {
margin-right:1px;
}
* html #wechsel a:hover {
width:150px; margin-right:0;
}





[IMG]https://finale.freesoft-board.to/logo11.jpg[/IMG]


[TABLE]

[TR]

[td][IMG]https://finale.freesoft-board.to/[COLOR='Red']landschaft.jpg[/COLOR][/IMG] [/td]
[td][IMG]https://finale.freesoft-board.to/katze.jpg[/IMG] [/td] 
[td][IMG]https://finale.freesoft-board.to/hund.jpg[/IMG] [/td]
[/TR]

[TR]

[td][IMG]https://finale.freesoft-board.to/maus.jpg[/IMG] [/td]
[td][IMG]https://finale.freesoft-board.to/mensch.jpg[/IMG] [/td] 
[td][IMG]https://finale.freesoft-board.to/meer.jpg[/IMG] [/td]
[/TR]

[TR]

[td][IMG]https://finale.freesoft-board.to/detail.jpg[/IMG] [/td]
[td][IMG]https://finale.freesoft-board.to/grau.jpg[/IMG] [/td] 
[td][IMG]https://finale.freesoft-board.to/blau.jpg[/IMG] [/td]
[/TR]

[/TABLE]

KANN mir irgendwer einen klitzekleinen Wink mit dem Zaun geben, ich kapitulier hier nämlich...und wer weiß, vielleicht geht es ja ÜBERHAUPT nicht.

Danke schon mal vorab

Luzie

 

[Broken Sword]

Hi,
das funktioniert so, wie es da steht. Im Hintergrund vom a-Tag wird das zweite Bild gezeigt. Allerdings überschattet der img-Tag den a-Tag vollkommen, deshalb wirst du vom zweiten Bild nichts sehen können.
Mache es am besten ohne a- oder img-Tag.
CSS

#image1 {
background-image:url('images/image1.jpg');
width:200px;
height:200px;
}
#image1:hover {
background-image:url('images/image2.jpg');
}

HTML:

Ansonste wäre vielleicht noch ein JS-Variante etwas für dich.

Gruß
Broken Sword

 

[luzie]

...das werde ich natürlich gleich [leider erst]übermorgen wieder testen.

DANKE.