Mysterious Picture

This JavaScript script shows images in a page only when the user requests it.
It can be used in several cases:

In a quiz, when the image is the answer to a question posed to the reader.
When we want achieve a visual effect where the image punctuates a demonstration, but must be presented at the end of this demonstration.
When we want to superimpose a text and an image, the text appearing before the image as being more readable without the image.

How the application works

The image is displayed along with the page to avoid a delay in response, but some CSS properties of the area which contains it have been defined to make it transparent.

The appearance is controled with a fade in effect at an onClick event or with onOver. In the second case one simply moves the mouse over the image to let it appears.
The script uses a fade function to change the area with a level of opacity from zero to total opacity.

Step by step

Overlay of text and image

To gradually replace a text by a picture, they are placed in layers superimposed by CSS properties.
The two layers are stored into a third, a simple container, in order to reserve space on the page.

The layers

<div class="mback" style="width:500px;height:375px" onClick="showMysteryPicture('mbox')">
    <span class="mtext" style="width:500px;height:375px" >?</span>
    <span id="mbox" class="mbox"> 
                 <img src="images/voyage03.jpg" width="500" height="375">
    </span>
</div>

mback is the container.
mtext contains a question mark and its CSS properties make it giant.
mbox contains a picture that is transparent at start.

The size of the container and the text area must be defined. It is defined into the page to allow the script used on different pictures with different sizes.

The CSS properties

.mback
{
    position:relative;
}

.mtext
{
    display: block;
    position: absolute;
    background-color: #CCA;
    z-index:10;
    font-size:600%;
    text-align:center;
}

.mbox
{
    display:none;
    position:absolute;
    z-index:11;
    opacity:0.0;
}

The background layer has a relative position, but the internal layers have an absolute position within the container layer. No position is given to internal layers. It is essential for the overlay and it works with all browsers.

The text has a multiplied size to be displayed as a giant question mark.

The image opacity is initialized to 0. So it is transparent at the outset and therefore we only see the question mark. To make the image appear, a script is used.

When the image appears, the text disappears, it is obtained by the z-index properties: the image with an index of 11 is placed above the text which has an index of 10.

Appearance of the image

With a timer, we gradually change the opacity of the image to set it from 0 (transparency) to 255 (total opacity)

The script


function fadein(id) 
{
    var level = 0;
    while(level <= 1)
    {
        setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
        level += 0.01;
    }
}

function showMysteryPicture()
{
    fadein("mbox");
}

The showMysteryPicture() function that is associated to the onClick event of mbox calls fadein() with the ID of the layer containing the image, and fadein increases the level variable which varies from 0 to 1 to change the opacity of the layer.

The demonstration is provided in an archive that contains all the necessary sources.

The demonstration

This demonstration uses the script mystery.js that is sufficient to manage all aspects of the appearance of the mysterious image.

There is an image hidden under the shaded area but it appears only at demand.

To show this image, click on the grayed area...