nicht angemeldet
onmouseover flackert im FF oder träge im IE
Hallo Leute,
ich habe ein unschönes Browserverhalten das ich nicht in den Griff bekomme. Vielleicht weiß jemand Rat?
Ich möchte über Bild einen Rahmen einblenden wenn die Maus über diesem
IMG ist. Ich mache das derzeit mit javascript.
Wenn man folgende Datei einmal in beiden Browsern aufruft (FF & IE)
http://www.zebrafrosch.com/test/TEST.html dann seht ihr das im linken Bild im Firefox mein Layout wie wild flackert wenn man die Maus bewegt.
Rechts ist alles prima.
Im rechten Bild ist im FF alles prima aber der IE ist zu träge manchmal kommt er mit dem mousout gar nicht mehr nach und führt die Funktion gar nicht aus.
Der Unterschied zwischen beiden Bilder ist der Funktionsaufruf im onmouseout. Links ist onmouseout am Bild, Rechts am DIV Layer.
Wie kann ich beide Nachteile wegbekommen so das es in beiden Browsern
geschmeidig läuft?
Hier mein Code Schnippsel:
<style type="text/css">
.out { position:relative; width:0px; height:0px;}
.in { position:absolute; top:10px; left:10px; width:286px; height:240px; border:10px solid #FFCC00; visibility:hidden; }
</style>
<script type="text/javascript">
function show(layer)
{
if (document.getElementById) document.getElementById(layer).style.visibility = "visible";
}
function hidden(layer)
{
if (document.getElementById) document.getElementById(layer).style.visibility = "hidden";
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="614">
<tr>
<td>
<div class="out"><div id="01" class="in"></div></div>
<img onmouseover="show('01')" onmouseout="hidden('01')" src="000174dec115a001.jpg" width="306" height="260" style="margin:10px;" /></td>
<td>
<div class="out"><div onmouseout="hidden('02')" id="02" class="in"></div></div>
<img onmouseover="show('02')" src="002064dec115a001.jpg" width="305" height="260" style="margin:10px;"/></td>
</tr>
</table>
-
Hi,
wozu dieses unnütze DIV? Und wieso überhaupt Javascript? Wenn ein border bei :hover dargestellt werden soll, dann definiere das einfach im CSS. Und da der Rahmen ja eigentlich nur einen Sinn ergibt, wenn eine Funktion aufgerufen werden kann, sprich das Bild verlinkt ist, funktioniert das auch in älteren IEs.freundliche Grüße
Ingo-
Hallo,
Warum verwendest du nicht einfach folgendes:
img:hover { outline: 10px solid yellow; }
oder, wenns denn auch im IE6 etc. gut angezeigt werden soll:
a:hover img { outline: 10px solid yellow; }--
ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}-
Hi,
Warum verwendest du nicht einfach folgendes:
wieso ich?
oder, wenns denn auch im IE6 etc. gut angezeigt werden soll:
a:hover img { outline: 10px solid yellow; }nö - das versteht noch nicht einmal der IE 7.
freundliche Grüße
Ingo-
Hallo,
Warum verwendest du nicht einfach folgendes:
wieso ich?Hab ich zu dir geredet?^^
oder, wenns denn auch im IE6 etc. gut angezeigt werden soll:
a:hover img { outline: 10px solid yellow; }
nö - das versteht noch nicht einmal der IE 7.Okay, stimmt. Outline erkennt er tatsächlich so noch nicht. Aber mit border funktioniert das tadellos.
Nur braucht er kein Border... mhm.--
ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}-
Hallo ihr beiden,
danke fürs lesen.
border ist eben leider nicht das richtige für mich. Denn mit einem Border würde die Grafik in weite und höhe zulegen. Das geht nicht. In meiner Demo Seite sind es nur 2 große Bilder im Projekt habe ich aber Unmengen von Bildern (Stoffansichten) über die man rüberschwenken kann.
Wenn Ihr genau kuckt seht ihr das mein rahmen direkt über dem Bild liegt und nicht drumrum. Die verzwickten divs brauche ich um den absoluten div ein element zu bieten an dem er sich ausrichten kann. In meinem Fall ein relativer DIV, mein Elternelement. Also alles in allem habe ich alle Möglichkeiten von CSS überdacht und befinde meine Lösung als gar nicht so schlecht, eben leider nur nicht im FF. Denn dieses Flackern ist nicht schön.Gruß Daniel
-
-
-
-