Navigation mit Rollover-Bildwechsel bei 2 Bildern

[ChrisT]

Hallo zusammen

Ich suche ein Modul - oder eine andere Möglichkeit - um per Mouseover über Bild 1 das Bild 2 wechseln lassen zu können. Konkret geht es um eine Startseite für einen Musiker, auf der er in seinem Musikzimmer sitzt, um in herum sind Gegenstände verteilt - bei Mouseover sollte der Text (Seitenname) neben den Gegenständen eingeblendet werden, z.B. "Kontakt" neben dem Telefon.

Ich hoffe, mir hat jemand den glorreichen Tipp, wie ich ans Ziel komme.

Dankeschön!
Chris

[Elvador]

Das Beschriebene sollte sich mittels CSS realisieren lassen.
Schau dir mal die Pseudo-Klasse ":hover" an!
Damit sollte das mit einem normalen Navigationsmenü als Modul möglich sein.

[ChrisT]

Ich stelle fest, ich habe mich zuwenig ausführlich geäussert.

Die Bilder der Gegenstände (inkl. Beschriftung, die sich bei Mouseover einblendet) würden sich überlappen, was meines Wissens nicht mehr elegant mit CSS gelöst werden kann.

Der Wechsel eines zweiten Bildes (Beschriftung) bei Mouseover des ersten (Gegenstand) wäre praktischer, da die Mouseover-Flächen präziser und ohne Überlappung definiert werden könnten.

[Elvador]

vielleicht habe ich noch immer etwas falsch verstanden, aber m.E. sollte CSS das dennoch lösen können:
Schema (wie es im Prinzip klappt):

<nav>
<li id="eins"><a href="">Erstes</a></li>
<li id="zwei"><a href="">Zweites</a></li>
...
</nav>

und im CSS

li {
  display: block;
  position: absolute;
  ...
}
/* Navigationsblock */

a {
  width: 0;
  height: 0;
  overflow: hidden;
  ...
}
/* Schrift verstecken, via padding übers ganze li legen*/

li:hover a, li a:hover {
  height: auto;
  width: auto;
  ...
}
/* Text anzeigen bei Mousover */

#eins {
  POSITIONIEREN
}

#eins a {
  HINTERGRUNDBILD1
}

#eins:hover a, #eins a:hover {
  HINTERGRUNDBILD2
}
...

Oder was spricht dagegen?!

[mike_mcfly]

...vielleicht mit Imagemaps?

Siehe:
http://www.cssplay.co.uk/menu/imap.html

[ChrisT]

vielleicht habe ich noch immer etwas falsch verstanden, aber m.E. sollte CSS das dennoch lösen können:
Schema (wie es im Prinzip klappt):

Der Groschen ist gefallen – dankeschön, ich werde das ausprobieren!

Nicht begriffen habe ich

a {
width: 0;
height: 0;
overflow: hidden;
...
}

Warum 0/0?