nicht angemeldet
Hi!
Gegeben sei der nachfolgende Beispiel-Code. Im Container #images befinden sich eine Bilderliste (#thumbs) und ein weiterer Container (#areas). Letzterer soll die Thumbs-Liste überlagern. Zu erkennen ist #areas am roten Rahmen. Darin befinden sich weitere Elemente (.area), denen ich einen blauen Rand gegeben habe. Nun möchte ich, dass der Mauszeiger beim Ein- und Austreten in eines der .area-Elemente eine Aktion auslöst (onmouseover, onmouseout). Mein Problem mit den Internet Explorern (getestet IE6 und IE8) ist, dass in leeren .area-Elementen nur deren Rand, nicht aber deren nicht vorhandenes Inneres zum Element zu zählen scheint. Sprich: wenn die Maus auf rot oder blau ist, ist sie over, sonst ist sie out. (Firefox 3.0 macht es so wie ich das möchte, andere Browser hab ich (noch) nicht probiert.)
Die linken beiden .area-Elemente habe ich zum Test präpariert, das möchte ich aber eigentlich nicht so haben. Ganz links ist ein transparentes GIF flächenfüllend eingefügt, da wird das over so erkannt, wie ich das möchte. Im zweiten von links habe ich "XXX" als Inhalt eingefügt. Wenn die Maus nicht direkt darüber ist, wird sie nicht als over erkannt.
Die Event-Handler onmouseover und onmouseout habe ich #areas zugefügt. Es ändert sich am Verhalten nichts, wenn man sie stattdessen jeweils den einzelnen .area-Elementen gibt. Auch onmousemove ergibt das gleiche Verhalten. Mein eigentliches Ziel ist, dass in den blau gekennzeichneten Bereichen jeweils unterschiedliche Aktionen ausgeführt werden (und das auch unabhängig von den darunter liegenden Bildern). Dazu müsste ich onmouseover und onmouseout sowieso den einzelnen .area-Elementen zuweisen. Natürlich könnte ich auch #images "anzapfen" und anhand der X-Position die jeweilige Aktionen auslösen. Doch ich dachte, dass es vielleicht auch so geht. Vermutlich werde ich die X-Position-Lösung weiterverfolgen, aber bekommt man es auch auf diese Weise und ohne Pseudo-Inhalt hin?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
a img { border-style: none; }
#thumbs {
position: absolute;
list-style-type: none;
margin: 0;
padding:0;
z-index: 1;
}
#thumbs li {
float: left;
width: 120px;
height: 96px;
}
#areas {
position: absolute;
z-index: 3;
width: 470px;
height: 86px;
border: 5px solid red;
}
.area {
float: left;
width: 84px;
height: 76px;
border: 5px solid blue;
}
</style>
<script type="text/javascript">
function over() {
document.getElementById('content').innerHTML = "Ich hab die Maus über.";
}
function out() {
document.getElementById('content').innerHTML = "Sie ist weg.";
}
</script>
</head>
<body>
<div id="content">Inhaltsplatzhalter</div>
<div id="images">
<ul id="thumbs">
<li><a href="#"><img src="http://de.selfhtml.org/grafik/anzeige/thumbnails/thumb1.jpg" /></a></li>
<li><a href="#"><img src="http://de.selfhtml.org/grafik/anzeige/thumbnails/thumb2.jpg" /></a></li>
<li><a href="#"><img src="http://de.selfhtml.org/grafik/anzeige/thumbnails/thumb3.jpg" /></a></li>
<li><a href="#"><img src="http://de.selfhtml.org/grafik/anzeige/thumbnails/thumb4.jpg" /></a></li>
</ul>
<div id="areas" onmouseover="over()" onmouseout="out()">
<div class="area"><img src="http://de.selfhtml.org/layouts/nr03/vorlage/images/transp.gif" width="100%" height="100%" alt="" /></div>
<div class="area">XXX</div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
</div>
</div>
</body>
</html>
Lo!