Hi,
ich habe die folgende kurze html-seite (als Test) um anklickbare grafiken auf einer Karte (Hintergrundbild der Tabelle) zu positionieren.
Leider funktionieren beim
MSIE der Pkt. "Magdeburg" nicht (keine Hand beim Mouseover, kein klick möglich) und bei
OPERA 6.0 funktioniert keiner der vier Varianten.
Ich möchte aber die Lage der Grafiken gerne über die css steuern.
------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test: koordinaten-tabelle</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="./test-koordinaten-tabelle.css">
</head>
<body>
<table border=0>
<!-- 1. und einzige zeile --><tr>
<!-- 1. und eizige spalte --><td width=420 height=420>
<a href="http://www.magdeburg.de" target="_blank"><div id=magdeburg><img src="lampe.gif"></div></a>
<span class="erfurt"><a href="http://www.erfurt.de" target="_blank"><img src="lampe.gif"></a></span>
<a href="http://www.dresden.de" target="_blank"><img src="lampe.gif" class="dresden"></a>
<a href="http://www.schwerin.de" target="_blank"><img src="lampe.gif" id="schwerin"></a>
</td></tr></table>
</body>
</html>
und dazu folgende css-datei:
BODY {
position:absolute;
top:0mm;
left:0mm;
color:#000000;
padding: 0,0,0,0;
margin: 0,0,0,0;
}
table {
position:absolute;
top:0mm;
left:0mm;
background-image:url(test-koordinaten-tabelle.gif);
border-width:0mm;
border-style:solid;
border-color:#000000;
padding: 0,0,0,0;
margin: 0,0,0,0;
width:420px;
height:420px;
}
td {
width:12px;
line-height:10pt;
}
img {
border-width:0mm;
border-style:solid;
border-color:#000000;
padding: 0,0,0,0;
margin: 0,0,0,0;
}
#erfurt {text-decoration: none;
position:absolute;
top:165pt;
left:165pt;
}
#dresden{text-decoration: none;
position:absolute;
top:155pt;
left:220pt;
}
#magdeburg {text-decoration: none;
position:absolute;
top:115pt;
left:180pt;
}
#schwerin {text-decoration: none;
position:absolute;
top:55pt;
left:185pt;
}
.erfurt {
position:absolute;
top:165pt;
left:165pt;
}
.dresden{
position:absolute;
top:155pt;
left:220pt;
}
.magdeburg {
position:absolute;
top:115pt;
left:180pt;
}
.schwerin {
position:absolute;
top:55pt;
left:185pt;
}
---------------------------------------------------------------
Alle Punkte sind mit dieser css exakt positioniert, nur ist die a href-funktionalität "totgelegt", wieso ???
Gruß
@ndre@s