11550 sujets

JavaScript, DOM et API Web HTML5

Image qui se dissous

Bonjour je ne connais pas beaucoup le javascript mais j'aimerais savoir comment faire pour que lorsque je clique sur un lien de mon menu une image vient apparaitre sur tout l'ecran puis disparait au bout de quelques secondes.
Modifié par ronytexasranger (30 Dec 2010 - 08:53)
Bonjour,

voici une piste avec un fichier afficherImage.html :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>    
        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
        <meta content="fr" name="language"/>
        <title>
            Afficher image
        </title>
    </head>
    <body>
    	<a id="lien" href="#">Cliquez-moi</a>
    	<script src="afficherImage.js" type="text/javascript">
        </script>
	</body>
</html>


et un fichier afficherImage.js dans le même répertoire
/**
 * Cache l'élément "afficherImage"
 */
function cacherImage() {
	document.getElementById("afficherImage").style.display = "none";
}

/**
 * Affiche pendant 3 secondes l'élément "afficherImage"
 */
function afficherImage() {
	document.getElementById("afficherImage").style.display = "block";
	
	// On appelle la fonction cacherImage dans 3000 ms.
	setTimeout(cacherImage, 3000);
}

// Quand toute la page a été chargée
window.onload = function () {
	
	// Ajoute l'image au document.
	document.body.innerHTML += '<img alt="un kiwi" id="afficherImage" src="http://www.biocoop-rouen.fr/media/kiwi__081629700_1129_10122010.jpg" style="display:none;height:100%;position:absolute;width:100%"/>';
		
	// Quand on clic sur l'élément "lien" on affiche l'image
	document.getElementById("lien").onclick = function () {
		afficherImage();
	};
	
	// Pareil pour ceux qui naviguent au clavier
	document.getElementById("lien").onkeydown = function () {
		afficherImage();
	};
};

Modifié par adrien881 (30 Dec 2010 - 09:59)
Sujet clos
Aller à