L'image mystérieuse

Ce script en JavaScript fait apparaître les images dans une page uniquement lorsque l'utilisateur le demande.

On peut l'utiliser dans plusieurs cas:

Dans un quizz, lorsque l'image est la réponse à une question posée au lecteur.
Lorsque l'on veut ménager un effet visuel où l'image vient ponctuer une démonstration, mais ne doit être présentée qu'à la fin de cette démonstration.
Lorsqu'on veut superposer un texte et une image, le texte apparaissant avant l'image car étant plus lisible sans l'image.

Comment l'application fonctionne

L'image est en fait affichée en même temps que la page, pour éviter un délai de réponse, mais les propriétés CSS de la zone qui la contient ont été définies pour la rendre transparente.

On commande l'apparition en fondu avec l'évènement onClick, ou mieux encore avec onOver. Dans le second cas il suffit de passer la souris sur l'image pour qu'elle apparaisse.
Le script qui la fait apparaître utilise une fonction de fondu pour faire passer la zone d'un niveau d'opacité zéro au niveau total.

Réalisation pas à pas

Superposition du texte et de l'image

Pour remplacer progressivement un texte par une image, on les place dans des calques superposés grâce aux propriétés CSS.
On place les deux calques dans un troisième, le conteneur, afin de réserver un espace sur la page.

Les calques

<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 est le conteneur.
mtext contient un point d'interrogation que ses propriétés CSS rendront géant.
mbox contient une image transparente au départ.

Il faut préciser la taille du conteneur et celle du texte. On le fait dans la page plutôt que dans le fichier mystery.css afin de pouvoir utiliser le script avec des images de taille différentes.

Leurs propriétés CSS

.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;
}

Le calque de fond à une position relative, mais les calques internes ont une position absolue à l'intérieur du calque de fond. Aucune position n'est donnée aux calques internes. C'est indispensable pour la superposition et cela fonctionne avec tous les navigateurs.

Le texte à une taille démultipliée pour afficher un point d'interrogation géant.

L'image à une opacité de 0. Donc elle est transparente au départ et l'on ne voit donc que le point d'interrogation. Pour la faire apparaître, on utilisera un script.

Lorsque l'image apparaîtra, le texte disparaîtra, cela est obtenu par les propriétés z-index: l'image avec un index de 11 est placée au-dessus du texte qui a un index de 10.

Apparition de l'image

Avec un timer, on modifie progressivement l'opacité de l'image pour la faire passer de 0 (transparence) à 255 (opacité totale).

Le script


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

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

La fonction showMysteryPicture() qui est associée à l'évènement onClick de mbox, appelle fadein() avec l'identifieur du calque contenant l'image, et fadein fait passer la variable level de 0 à 1 pour faire évoluer l'opacité du calque.

La démonstration est fournie dans une archive qui contient tous les sources nécessaires.

La démonstration

Cette démonstration utilise le script mystery.js qui suffit à gérer tous les aspects de l'apparition de l'image mystère.

Il y a donc une image cachée sous la zone grisée mais elle ne s'affiche qu'à la demande.

Pour faire apparaître cette image, cliquer sur la zone cachée ...