morgen,
ich habe ein Problem mit CSS Image Maps, Redux - Flickr-like Technique?
und zwar versuche ich verzweifelt die Vierecke an verschiedenen Positionen anzuzeigen,doch leider funktioniert dies nicht,stadessen bleiben sie an einer Position und überlagern sich dort.
ich habe ein Problem mit CSS Image Maps, Redux - Flickr-like Technique?
und zwar versuche ich verzweifelt die Vierecke an verschiedenen Positionen anzuzeigen,doch leider funktioniert dies nicht,stadessen bleiben sie an einer Position und überlagern sich dort.
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<script src="javascript/prototype.js"></script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
dl#Map{background:url(hipisland.jpg) no-repeat;width:100%; height:256px; }
</style>
</head>
<body>
<dl id="Map">
<?php
$arr = array(10 => array(1 => "ich", "x" => 100),20 => array(1 => "du", "x" => 200));
foreach($arr as $x){
?>
<style type="text/css">
<?php echo "dd#".$x[1];?>{ <?php echo "top:".$x["x"];?>px; left: 63px; }
<?php echo "dd#".$x[1];?> a{ position: absolute; width: 32px; height: 32px; text-decoration: none; border: 3px dotted #FFFCE6; }
<?php echo "dd#".$x[1];?> a span{ display: none; }
<?php echo "dd#".$x[1];?> a:hover{ border: 3px solid #BCBCBC; }
</style>
<dd id="<?php echo $x[1];?>";><a href="#"><span>This is the life...</span></a></dd>
<?php
}
?>
</dl>
</body>