I've recently made a webcam application. See it here: <http://kennipoke.dk/nickelodeon/da/docs/webcam.php>

At the top is 4 helmets which when clicked will add ?helmet=X to the URI..

Now above the actual webcam screen i want the selected helmet to appear with some transparency so you can see your own face through it.

The image should only appear when you hover the shoot button.

Now i got all of this working except in IE!!!!!!

Here's the relevant code:

```
<div id="camera">
    <div id="screen-frame<?php echo $helmet ?>"></div>
    <div id="screen"></div>
    <div id="buttons">
         <div class="buttonPane">
           <a id="shootButton" href="" class="blueButton btn btn-info">Hold musen over denne knap og tag et billede</a>
         </div>
         <div class="buttonPane hidden">
               <a id="cancelButton" href="" class="blueButton btn btn-danger">Tag et nyt</a> <a id="uploadButton" href="" class="greenButton btn btn-info">Videre</a>
         </div>
    </div>
    <span class="settings"></span>
</div>

```

Of course $helmet is the value of the URI

```
$('#shootButton').mouseover(function() {
    $('#screen-frame1').removeClass('hide').addClass('show');
});
$('#shootButton').mouseout(function() {
    $('#screen-frame1').removeClass('show').addClass('hide');

```

Im not that experienced with jQuery, so i made four copies of this script. One for each #screen-frameX

And heres the CSS:

```
#camera{
    background:url('../img/cam_bg.jpg') repeat-y;
    border:1px solid #f0f0f0;
    height:370px;
    width:520px;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0;
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6);
    box-shadow:0 0 4px rgba(0,0,0,0.6);
    margin: 130px 30px 0;
    position: relative;
    z-index: 5;
}

#screen{
    width:520px;
    height:370px;
    background:#ccc;
    line-height: 360px;
    text-align: center;
    color:#666;
}

#screen-frame1 {
    background: url("../img/overlay/transparent/helmet-t-1.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame2 {
    background: url("../img/overlay/transparent/helmet-t-2.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame3 {
    background: url("../img/overlay/transparent/helmet-t-3.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}
#screen-frame4 {
    background: url("../img/overlay/transparent/helmet-t-4.png") no-repeat scroll 0 0 transparent;
    position: absolute;
    width: 520px;
    z-index: 10;
}

.hide {
    height:0;
}

.show {
    height:370px;
}

```

Can anyone spot any problems that should cause this to malfunction in IE?