Hello,

I have the code below in which the play1.gif image is visible and when
the associated sound has been played the the 2 images same1.gif and
different1.gif appear. Once one of these has been selected the 3
images and the title disappear and the second title and play image
appear etc.

Problem is that for sucessive Test titles the titles and the
associated images move down the page. I am using the following css.

..hiddenDiv2 {
display: none;
}
..visibleDiv2{
display: block;
}

Is it possible to keep the successive titles and images in the same
place on the page?

Cheers

Geoff



<div id="test1" class="visibleDiv2">
<h3>Test 1:</h3>
<IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test11" class="hiddenDiv2">
<IMG alt="image" id="a11" src="../assets/images/same1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a12" src="../assets/images/different1.gif"
onclick="checkThisSecond(this);">
</div>

<div id="test2" class="hiddenDiv2">
<h3><em>Test 2:</em></h3>
<IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test21" class="hiddenDiv2">
<IMG alt="image" id="a21" src="../assets/images/same1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a22" src="../assets/images/different1.gif"
onclick="checkThisSecond(this);">
</div>