Question

I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it…I would also like this div to be pushed down as the box described above expands down.

Any suggestions?

Thank you very much in advance!

C*

Forgot the code that I am using…so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it’s quite long and I wasn’t sure if I should add that (it was create by Dreamweaver when I created a rollover image).

<div class="images">

<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>

<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>

</div>

Answer 1

You don’t give much information in your question about your current setup, but assuming that you have your HTML set out something like this:

<div>
    <img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
    <div id="tux_desc" class="imgDesc" style="display: none">
        <p>A cute penguin!</p>
    </div>
</div>
<div>
    <p>This text is part of the normal document flow</p>
</div>

Then you can use the following JavaScript (which makes use of jQuery):

$('#tux').hover(
    function() {
        $('#tux_desc').slideDown();
    },
    function() {
        $('#tux_desc').slideUp();
    });

You can see it working here: http://jsfiddle.net/wbAxm/1