Lag med koordinater
Jeg er ved at forsøge at implementere en simpel side, som er opbygget af lag. Siden har nogle billeder på det ene lag, og det andet lag skal så vise noget tekst, når musen bevæger sig hen over billedet. Jeg går ud fra, at der defineres et aktivt område inde i det ene lag, som resulterer i at teksten vises. Men af en eller anden grund, så kommer dette område hele tiden frem i øverste venstre hjørne. Jeg kan godt ændre størrelsen på området, ændre størrelsen på tekstboksen, der kommer frem, men jeg kan ikke finde ud af at flytte det aktive område.Er der nogle, som kan hjælpe mig med dette?
Her er min kode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
body {margin: 0; padding: 0;}
a {
text-decoration: none;
}
#page {
width: 969px;
}
#left {
width: 720px;
float: left;
}
#right {
}
#map {
margin:0;
padding:0;
width:720px;
height:720px;
background:url(/billede.jpg) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:8pt;
}
#map li {
margin:0;
padding:0;
list-style:none;
}
#map li a {
position:absolute;
display:block;
background:url(blank.gif);
}
#map li a span { display:none; }
#map li a:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
padding:5px;
border:1px solid #000;
background:#fff;
text-decoration:none;
color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
#map a.a0 {
top:60;
left:60;
width:28px;
height:28px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="page">
<div id="left">
<ul id="map">
<li><a class='a0' href='' title='a0'><span>
<b></b><br/>
<strong>Felt1</strong>: value<br/>
<strong>Felt2</strong>: value<br/>
<strong>Felt3</strong>: value<br/>
<strong>Felt4</strong>: value<br/>
<br/>
</span></a></li>
</ul>
</div>
<div id="right">
To the side
</div>
</div>
</body>
</html>
