nicht angemeldet
Ich habe es jetzt mit JavaScript auf wie ich glaube ähnliche Weise wie bei der Deutschlandkarte gemacht mit document.getElementById.
Sieht vielleicht alles etwas umständlich und gestümpert aus, aber so habe ich das als Laie eben ausgetüftelt.
Nun funktioniert eigentlich alles so wie ich es möchte, allerdings nicht in allen Browsern. Ältere Browser (IE6) scheinen ein Problem mit transparenten .pngs zu haben, und zeigen stattdessen deckendes weiss. Firefox und IE8 malen entgegen meinen Wünschen einen blauen Rand um mein gemaptes Bild. Wie kann ich das verhindern?
Opera und Safari (je die aktuelle Version) stellen die Seite so dar wie ich es wünsche.
Wäre es sinnvoll, Nutzer von älteren Browsern wie IE6 auf eine vereinfachte Seite umzuleiten, oder generell statt transparenter Overlays das ganze Bild auszutauschen?
Hier der Link
und hier der Code, Danke für die Hilfen!
<html>
<head>
<style type="text/css">
a:link { text-decoration:none; font-style:italic; color:grey; }
a:visited { text-decoration:none; font-style:italic;}
a:hover { text-decoration:none; font-style:normal;}
a:active { text-decoration:none; font-style:normal;}
a:focus { text-decoration:none; font-style:normal; }
</style>
<script language="JavaScript">
function show(el) {
document.getElementById(el).style.display = "block";
}
function hide(el) {
document.getElementById(el).style.display = "none";
}
</script>
</head>
<body>
<map name="colorMap">
<area name="Feld01"
coords="1,1,65,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken01');show('feld01');;hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06')"
onmouseout="hide('balken01');">
<area name="Feld02"
coords="65,1,105,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken02');show('feld02');hide('feld01');hide('feld03');hide('feld04');hide('feld05');hide('feld06');"
onmouseout="hide('balken02');">
<area name="Feld03"
coords="105,1,200,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken03');show('feld03');hide('feld01');hide('feld02');hide('feld04');hide('feld05');hide('feld06');"
onmouseout="hide('balken03');">
<area name="Feld04"
coords="200,1,400,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken04');show('feld04');hide('feld01');hide('feld02');hide('feld03');hide('feld05');hide('feld06');"
onmouseout="hide('balken04');">
<area name="Feld05"
coords="400,1,800,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken05');show('feld05');hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld06');"
onmouseout="hide('balken05');">
<area name="Feld06"
coords="800,1,946,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken06');show('feld06');hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');"
onmouseout="hide('balken06');">
</map>
<div id="menu" style="display:none; position:absolute;left:50px;top:280px;">
<a href="javascript:show('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06');">Feld01</a><br><br>
<a href="javascript:show('feld02');hide('feld01');hide('feld03');hide('feld04');hide('feld05');hide('feld06');">Feld02</a><br><br>
<a href="javascript:show('feld03');hide('feld02');hide('feld01');hide('feld04');hide('feld05');hide('feld06');">Feld03</a><br><br>
<a href="javascript:show('feld04');hide('feld02');hide('feld03');hide('feld01');hide('feld05');hide('feld06');">Feld04</a><br><br>
<a href="javascript:show('feld05');hide('feld02');hide('feld03');hide('feld04');hide('feld01');hide('feld06');">Feld05</a><br><br>
<a href="javascript:show('feld06');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld01');">Feld06</a><br><br>
<a href="javascript:hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06');hide('menu')">Start</a>
</div>
<div style="position:absolute; left:00px; top:100px; ">
<img src="grafiken/logo.jpg" alt="Ensemble Xenon" align="top" usemap="#colorMap">
</div>
<div id="feld01" style="background-color:#63cdf4; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild" />
</td>
<td valign="top">
<h1>Feld01</h1>
Blindtext
</td>
</table>
</div>
<div id="feld02" style="background:#99a8d3; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild"/>
</td>
<td valign="top">
<h1>Feld02</h1>
Blindtext
</td>
</table>
</div>
<div id="feld03" style="background:#9476b2; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild"/>
</td>
<td valign="top">
<h1>Feld03</h1>
Blindtext
</td>
</table>
</div>
<div id="feld04" style="background-color:#b77cb4; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild"/>
</td>
<td valign="top">
<h1>Feld04</h1>
Blindtext
</td>
</table>
</div>
<div id="feld05" style="background:#b34896; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild"/>
</td>
<td valign="top">
<h1>Feld05</h1>
Blindtext
</td>
</table>
</div>
<div id="feld06" style="background:#d12e99; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; ">
<table border=0 width="500">
<td valign="top">
<img src="grafiken/bild.png " alt="Bild" />
</td>
<td valign="top">
<h1>Feld06</h1>
Blindtext
</td>
</table>
</div>
<div id="balken01" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken01.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<div id="balken02" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken02.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<div id="balken03" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken03.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<div id="balken04" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken04.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<div id="balken05" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken05.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<div id="balken06" style="display:none; position:absolute; left:00px; top:100px; ">
<img src="grafiken/balken06.png " alt="Highlight" title="Highlight " usemap="#colorMap" />
</div>
<noscript>
Um diese Webseite vollständig anzuzeigen muss JavaScript aktiviert sein.
</noscript>
</body>
</html>
Gunnar Bittersmann
suit