Fladdrande onmouseover

4 svar · 375 visningar · startad av jonne 24 apr. 2007

jonneMedlem sedan jan. 20011 154 inlägg

Frågan24 apr. 2007 12:12#1

Har gjort lite experiment med transparenta png bilder i ie 5+6. Det fungerar bra över lag men har ett problem med lite onmouseover grejer.
Jag tror inte att problemet ligger i varken pngn eller i javascriptet dock.
Tror det är något med lageruppsättingen?

Gjorde tre olika tester på detta och den första fladdrar inte så mycket men det gör däremot de två andra. Jag tycker att jag borde kunna ha både onmouseover och onmouseout och visa/dölja mitt "fadelager" direkt, men det kanske är fel tänk?

http://www.jonne.net/png/tst2.html

Om någon skulle kunna bringa klarhet i detta för mig skulle det uppskattas. Håller på att bli tunnhårig här snart :)

The_HulkMedlem sedan juni 20031 837 inlägg

24 apr. 2007 12:30#2

har du testat att byta z-index på dina div-lager?
jag vet inte om det är högt eller lågt z-index som läggs om överst men det kan ju vara värt att testa.
nu verkar det som om du har högt z-index på den som ska ligga överst.

jonneMedlem sedan jan. 20011 154 inlägg

24 apr. 2007 13:48#3

Ju högre z-index desto högre upp ligger dem. Nerifrån och upp ligger de i koden och i z-index ordningen också. Fade lagret ligger alltså högst upp med den semitransparenta png.

jonneMedlem sedan jan. 20011 154 inlägg

24 apr. 2007 14:33#4

Verkar som om lösningen (även om den inte är riktigt riktigt som jag hade velat ha det) är att lägga både onmouseover och onmouseout på den containerdiven för hela paketet.

<div style="text-align:left; width:167px; height:154px; position:relative; float:left" onmouseover="hidediv('fade11')" onmouseout="showdiv('fade11')">
			
	<div style="position:relative; width:167px; height:154px; z-index:29">

	<img src="image_bg.png" border="0" />
	</div>
	
	<div style="position:absolute; width:167px; height:155px; top:0; left:0; z-index:30; " id="image11">
	<table height="147" width="161">
		<tr>
		<td valign="middle" align="center">
		<a href="foo.asp"><img src="2.jpg" border="0" /></a>
		</td>
		</tr>
	</table>
	</div>
	
	<div style="position:absolute; width:163px; height:152px; top:1px; left:1px; z-index:31; display:block; overflow:hidden;" id="fade11" >
	<img src="overlay.png" border="0" />
	</div>

</div>

tantenMedlem sedan nov. 20051 596 inlägg

25 apr. 2007 07:19#5

jonne skrev:

Verkar som om lösningen (även om den inte är riktigt riktigt som jag hade velat ha det) är att lägga både onmouseover och onmouseout på den containerdiven för hela paketet.

Vad är det som inte fungerar som du vill?
Jag gjorde ett test med att ta bort allt som jag upplevde som "onödigt" och tyckte det blev OK... ;)