nicht angemeldet
Hi!
(Firefox 3.0 macht es so wie ich das möchte, andere Browser hab ich (noch) nicht probiert.)
Dass die Links der Thumbs aber nicht mehr aufrufbar sind, weil #areas darüber liegt, stört nicht?
Doch schon, deswegen habe ich den Weg auch nicht weiter verfolgt, sondern nun wie angedeutet die Eventhandler auf #images gelegt und #areas ganz weggelassen. Jedoch verfolgte mich das Problem weiter. Ich lasse #thumbs über ein mit Javascript geändertes marginLeft nach links und rechts verschieben. Das soll in Abhängigkeit von der über #images positionierten Maus geschehen. #thumbs ist(/soll) durch seinen Inhalt breiter als der Viewport (sein), #images hingegen 100% vom Viewport. Das Beispiel hatte ich auf nur vier Bilder beschränkt, denn der beanstandete Effekt tritt da auch schon auf. Nun ist es auch so, dass bei bestimmten Werten von marginLeft links oder rechts keine Bilder mehr sind. Am Ende wird das nicht so sein, weil ich die Bilder "hintenrum" holen und wieder anfügen will, so dass ein endloses Band entsteht. Aber bevor ich soweit bin, war da erst einmal nichts und eben die Maus nicht mehr über #images obwohl sie innerhalb dessen Grenzen war.
Beim Nachvollziehen eben stellte ich fest, dass das Phänomen nur dann auftritt, wenn #images mit position: absolute; behandelt wird. Ohne dies füllt sich #images quasi von selbst, mit diesem hilft es nur einen (transparenten) Hintergrund zu verwenden. Oder vielleicht irgend ein anderer (unsichtbarer) Trick, der ohne zusätzlichen Request auskommt.
aber bekommt man es auch auf diese Weise und ohne Pseudo-Inhalt hin?
Ja, die .area müssen nur einen definierten Hintergrund abweichend von transparent haben.
Naja, das war im Prinzip auch nichts anderes als mein Workaround-Versuch im linken .area, nur dass dein Vorschlag den transparenten Pseudo-Inhalt in ein Hintergrundbild verlagert. Trotzdem danke ich dir für deine Antwort.
Wie auch immer. Im Grunde soll das Problem in der fertigen Lösung aufgrund des Endlosbandes gar nicht auftauchen. Es interessiert mich aber noch aus akademischen Gründen, warum der IE sich so verhält.
Anbei der geänderte Versuchsaufbau. Zum Nachvollziehen fahre man mit der Maus über den freien Bereich rechts (innerhalb von rot aber außerhalb von blau), sie ist/bleibt over. Man lasse position: absolute; wirken - weg ist sie. Und mit Hintergrundbild ist sie wieder da.
<!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; }
#images {
/* background-image: url("http://de.selfhtml.org/layouts/nr03/vorlage/images/transp.gif"); */
/* position: absolute; */
width: 800px;
border: 5px solid red;
}
#thumbs {
list-style-type: none;
margin: 0;
padding:0;
z-index: 1;
width: 480px;
border: 5px solid blue;
}
#thumbs li {
float: left;
width: 120px;
height: 96px;
}
</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" onmouseover="over()" onmouseout="out()">
<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>
</body>
</html>
Lo!