Annimation qui recouvre l'écran avec un png semi transparent

Télécharger le projet
Commenter

Description

Ce script permet de faire soit par annimation ou sans un remplissage de l'écran d'un png semi transparent pour voir ce qu'il y a derrière sans pouvoir le sélectionner un peut comme quand on fait un diaporama sur un site qui met en avant plan les images en mettant en arrière plan le reste du site legèrement noir,sans utilisé l'opacité de la commande javascript.

Source / Exemple : 


<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>annimation sur page entière</title>
	<script type="text/javascript" src="affiche.js"></script>
</head>
<body>

texte qui serai recouvert par un div semi-tranparent noir ou gris suivant l'image cliquer soi par annimation soit sans!!!

<span style="position:absolute; left: 44px; top: 69px;">
	<a href="javascript:Annimation('Frame1','lien1',1,1);"><!-- lance l'annimation -->
    	<img src="noir.png" width="50" height="50" border="0" alt="noir" />
    </a>
</span>
<span style="position:absolute; left: 144px; top: 69px;">
	<a href="javascript:SansAnnimation('Frame2','lien2');"><!-- lance sans annimation -->
    	<img src="gris.png" width="50" height="50" border="0" alt="gris" />
    </a>
</span>
<!-- les deux div cacher a 0 pixel,mettre toujour c'est balise en bas de page pour qu'il prenne la priorité sur les autres sans z-index -->
<div id="Frame1" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; background-image:url(noir.png)">
	<div style="display:none" id="lien1">
    	<p align="center"><br/><br/><br/><br/><br/>
        	<a href="javascript:efface('Frame1','lien1');">effacer</a>
        </p>
    </div>
</div>
<div id="Frame2" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; background-image:url(gris.png)">
	<div style="display:none" id="lien2">
    	<p align="center"><br/><br/><br/><br/><br/>
        	<a href="javascript:efface('Frame2','lien2');">effacer</a>
        </p>
    </div>
</div>
</body>
</html>

Conclusion :


tester sous IE7, FireFox 3, Safari sans bug ,tester sous Opéra il y a un bug avec l'animation car il n'affiche pas le div invisible je vais regardé pourquoi (apparament il fait abstraction de la condition une fois a 100% )
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (djmmix)