PDA

View Full Version : onmouseover problems in IE


ideal
10-14-2012, 10:32 PM
Hey, i am working on a website, where i need different images to either gain or loose their visibility when moused over. It works well in all browsers bur IE, and i can't find a solution :(

An example of the code is as follows:

<div id="box5"><img src="Pics/Communikation.jpg" width="353" height="248" alt="Communikation" style="opacity:1;
filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.0;
this.filters.alpha.opacity=00"
onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100" /></div>

Hope you can help. Thx!!

gentleone
10-16-2012, 04:19 PM
Which version of IE are you talking about?
For me it works in IE8 though. In the following example i took an opacity of 50%:
http://jsbin.com/uvizey/1/edit
IE9 uses the W3C standard opacity and ignores the filter.

ideal
10-17-2012, 10:33 PM
Thank you for the answer!
I'm using IE9...
Your exampel works fine on my IE9
aparently it's only my own site it ignores....

can i have messed up somewhere else, that some how affects it?

the whole html is here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ideal Pixel</title>
<link href="styles/ideal_cs5.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="menu"><img src="Pics/Dark Bar.jpg" alt="menu" width="1100" height="152" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="151,87,65" href="index.html" alt="frontpage" />
<area shape="circle" coords="421,87,66" href="Work.html" alt="work" />
<area shape="circle" coords="693,87,65" href="news.html" alt="whats new" />
<area shape="circle" coords="962,86,68" href="#" alt="about" />
</map>
</div>

<div id="box1"><img src="Pics/Logo Icon Design marked.jpg" width="353" height="248" alt="Logo and Icon Design" style="opacity:0;
filter:alpha(opacity=0)"
onmouseover="this.style.opacity=1.0;
this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0;
this.filters.alpha.opacity=0" /></div>

<div id="box2"><img src="Pics/Photo Retouch marked.jpg" width="353" height="248" alt="photo retouch" style="opacity:0;
filter:alpha(opacity=0)"
onmouseover="this.style.opacity=1.0;
this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0;
this.filters.alpha.opacity=0" /></div>

<div id="box3"><img src="Pics/Web Design.jpg" width="353" height="248" alt="web design" style="opacity:1;
filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.0;
this.filters.alpha.opacity=0"
onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100" /></div>

<div id="box4"><img src="Pics/Posters Flyers.jpg" width="353" height="248" alt="posters and flyers" style="opacity:1;
filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.0;
this.filters.alpha.opacity=0"
onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100" /></div>

<div id="box5"><img src="Pics/Communikation.jpg" width="353" height="248" alt="Communikation" style="opacity:1;
filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.0;
this.filters.alpha.opacity=0"
onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100" /></div>

<div id="box6"><img src="Pics/Prints.jpg" width="353" height="248" alt="prints" style="opacity:1;
filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.0;
this.filters.alpha.opacity=0"
onmouseout="this.style.opacity=1;
this.filters.alpha.opacity=100" /></div>
<div id="bund">
</div>

</div>
</body>
</html>

gentleone
10-17-2012, 10:53 PM
I've copied all your code and it's just working for me in IE.
http://jsbin.com/uvizey/8/edit