Why isn't the DIV with the image being hidden? - html

Question

I am trying to create an experiment involving a series of clickable images where a user has to rate an object after clicking on it. The workflow being:
User sees the three boxes, one changes color
User clicks on the box that changes color
User is shown an object (say a skunk)
User rates the object by entering in a # into a text input box
User sees all three boxes, and the next box changes color
I have the DIV with an id of E1 (representing example 1) set with a default display style of none (set by CSS initially) however it still shows up when I look at the page in my browser. As a result when I should only be seeing a cover.jpg I see E1.jpg along with its associated text input box.
Edit: Oh some of the code isn't completed yet (e.g. JavaScript events for recording the milliseconds taken to rate the object, or hiding or showing other DIVs). I just wanted to resolve the issue of display: none; not hiding anything.
CSS
#apDiv1 {
position:absolute;
width:120px;
height:120px;
z-index:1;
left: 656px;
top: 586px;
text-align: center;
display: block;
}
#apDiv2 {
position:absolute;
width:120px;
height:120px;
z-index:1;
left: 543px;
top: 167px;
text-align: center;
display: block;
}
#apDiv3 {
position:absolute;
width:120px;
height:120px;
z-index:1;
left: 243px;
top: 167px;
text-align: center;
display: block;
}
#div.C1 {
display: block;
z-index: 1;
}
#div.E1 {
display: none;
z-index: 1;
}
#div.E2 {
display: none;
}
#div.E3 {
display: none;
}
</style>
JavaScript
<script>
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
function HideDIV(d)
{
document.getElementById(d).style.display = "none";
}
function ShowDIV(d)
{
document.getElementById(d).style.display = "block";
}
</script>
Body
<!-- Creates the background for the two screens -->
<div id="ForDualScreen">
<img src="Images/Example/House.jpg" width="1280" height="1000" border="0" style="float:left;" />
<img src="Images/Black.jpg" width="1280" height="1000" border="0" style="float:right;"/>
</div>
Show/Hide apDivs on click
<div id="apDiv1">
<div id="C1">
<img src="Images/Example/Cover.jpg" onclick="ShowDIV('E1');HideDIV('C1');" />
</div>
<div id="E1">
<img src="Images/Example/E1.jpg" />
<br />
<input name="E1Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTshowCover" />
</div>
</div>
<div id="apDiv2">
<img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" />
<div id="E2">
<img src="Images/Example/E2.jpg"/>
<br />
<input name="E2Rating" type="text" size="5" maxlength="1" oninput="Javascript_showCover" />
</div>
</div>
<div id="apDiv3">
<img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" />
<div id="E3">
<img src="Images/Example/E3.jpg"/>
<br />
<input name="E3Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTMovetoInstruction" />
</div>
</div>

Answer 1

Your CSS should simply be
#E1 {
display: none;
z-index: 1;
}

Answer 2

Use jQuery and the show/hide methods:
http://api.jquery.com/hide/
http://api.jquery.com/show/
or even, toggle:
http://api.jquery.com/toggle/
Here's the related tutorial:
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide