Hallo,
ich habe ein Problem mit dem Umsetzen meiner Seite in CSS.
Also so sieht das "Menü" aus. Es besteht aus einem Flur, vom dem verschiedene Zimmer abgehen. (funktioniert leider nur richtig im IE)
http://lunikell.lu.funpic.de/gross/gpages/gflur.php
Wenn man über die Türen (=Links) fährt, soll der Zimmername aufleuchten.
Hab das bis jetzt mit einer ImageMap und Javaskript gemacht.
Geht im IE und Opera wunderbar, aber machen Firefox und Netscape Schwierigkeiten und zeigen mein javaskript nicht. Und ohne aufleuchtende Zimmernamen ist dieser ganze Flur wirklich doof.
Nun suche ich nach einer Möglichkeit genau dasselbe mit CSS zu machen.
Ich kann zwar einen Link selbst beim überfahren mit :hover verändern (Hintergrund oder Farbe oder sonstwas), aber wie mache ich das , wenn beim überfahren eines Links ein ganz anderes Bild sich verändern soll? Geht das überhaupt?
Habe schon versucht das ganze Problem zu umgehen, indem ich die Zimmernamen direkt auf die Türen schreib, aber das geht ncht, da manche Türen so schmal sind, wegen der Perspektive. Das wird zu klein....
Hier der bisherige Code meiner Flur Seite mit Image Map und Javaskript (hab die ganzen Wiederholungen rausgekürzt, ist eh ziemlich oft das gleiche):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mein virtueller Flur</title>
<link rel="stylesheet" href="../gstylesheet.css" type="text/css">
</head>
<script language="JavaScript" type="text/javascript">
/*JavaScript für aufleuchtende Zimmernamen*/
/*Klo*/
function klo1()
{document.all.kloz.src = "../gimages/leer.gif"}
function klo2()
{document.all.kloz.src = "../gimages/igflur/gflur_klo2.gif"}
(...... und das ganze für jedes einzelne Zimmer......)
</script>
<body>
</div>
<map name="flur">
<area shape="POLY" coords="67,409,67,85,129,104,129,363"
href="#" onMouseOver="klo2();
onMouseOut="klo1();"
onFocus="blur();">
(.... und so weiter.... zu jeder Tür....)
</map>
<div style="position:absolute;left:341px;top:33px;z-index:3;">
[img]../gimages/igflur/gflur1.gif[/img]
</div>
<div style="position:absolute;left:665px;top:33px;z-index:3;text-decoration:none">
[img]../gimages/igflur/gflur2.gif[/img]
</div>
<div STYLE =" position:absolute;left:427px;top:350px;z-index:5;width:127px;height:78;">
[img]../gimages/leer.gif[/img]
</div>
(.... und noch viel mehr Bilder, die normal "leer" sind und beim überfahrn den Zimmernamen zeigen....)
<div STYLE =" position:absolute;left:27px;top:60px;width:300px;z-index:9;"
CLASS =" textigr">
Herzlich Willkommen
in meinem
virtuellen Flur.
Fühl dich nur ganz wie Zuhause und erkunde doch mal einige Zimmer...
</div>
</body>
</html>Ich hoffe mir kann irgenjemand helfen, diesen Flur doch noch hinzukriegen.
Hab beim durchstöbern von zig CSS und Webdesign Seiten irgendwie nichts gefunden....
Viele Grüße und danke im vorraus
Nicki
