Du kannst auch mit CSS die Farb-Links und die anzuzeigenden Bilder abzählen:
Code:
a:nth-child(1) { Farbe und andere Defintionen }
a:nth-child(2) { Farbe und andere Defintionen }
a:nth-child(3) { Farbe und andere Defintionen }
usw.
So kannst du dann auch die Bilder abzählen und aufrufen:
Code:
a:nth-child(n):hover #gallery li:nth-child(n) { display: block )
Du musst dann noch eine Liste mit den Bildern anlegen, jeden li-container innerhalb der Liste oben links absolut positionieren und ausblenden, um dann bei Mouseover über einen der Links den entsprechenden li-Container/das entsprechende Bild in der Liste einblenden.
Allerdings würde ich das nicht einmal mit Links und auch nicht mit einer Tabelle machen:
Code:
<ul>
<li>Farbcode <img src="#" width="n" height="n" alt="#" /></li>
<li>Farbcode <img src="#" width="n" height="n" alt="#" /></li>
<li>Farbcode <img src="#" width="n" height="n" alt="#" /></li>
</ul>
- den li-Container feste Dimensionen geben und nach links floaten lassen
- dem ul-Container feste Dimension geben, die einem Vielfachen der Dimensionen der li-Container entsprechen
- und wieder mit der Pseudoklasse :nth-child(n) jeden Punkt in der Liste ansteuern, die entsprechende Hintergrundfarbe geben
- die Bilder initial mit "display: none" ausblenden
- bei :nth-child(n):hover das entsprechende Bild per "display: block" und mit "position: absolute" und "z-index" an einer geeigneten Position einblenden
P.S.: Anstelle der der Bilder könntest du einfach ein leeres Block-Element oder ein als Block-Element definiertes Inline-Elemente platzieren, dass anstelle der Bilder angezeigt wird und in dem die Bilder per CSS geladen werden. Wenn dann auch noch alle Bilder die gleiche Größe haben, könntest du alle Bilder in einem großen Bild anordnen und als sogenannten "sprite" zur Verfügung stellen. Per "background-position" kannst du dann definieren, welcher Bereich des Bildes in dem erwähnten Block-Element angezeigt werden soll. Der Vorteile wäre, dass du nur ein großes Bild anstelle von vielen kleinen Bildern laden musst. Allerdings kann diese Methode bei der Masse der Bilder auch zu einem verwirrenden Arbeitsaufwand führen.
Mark dir aber mal das Stichwort
CSS-Sprites. In vielen Situationen sind Sprites ein sinnvoller Kniff, etwa für Navigationselemente.
