Druckbare Version
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
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.
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.
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):
und im CSSHTML-Code:<nav>
<li id="eins"><a href="">Erstes</a></li>
<li id="zwei"><a href="">Zweites</a></li>
...
</nav>
Oder was spricht dagegen?!Code: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
}
...
...vielleicht mit Imagemaps?
Siehe:
http://www.cssplay.co.uk/menu/imap.html
Der Groschen ist gefallen – dankeschön, ich werde das ausprobieren!Zitat:
Zitat von Elvador
Nicht begriffen habe ich
a {
width: 0;
height: 0;
overflow: hidden;
...
}
Warum 0/0?