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

Soyez le premier à donner votre avis sur cette source.

Vue 12 069 fois - Téléchargée 977 fois

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% )

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
126
bonjour
je trouve qu'il est inutile de mettre un script avec document.all a moins d'avoir IE 4 ce qui est tres tres rare de nos jours en plus sa alourdie beaucoup le script et ca fait du travaille pour rien.
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

parreil que XtremDuke, le png n'est pas pris en charge pour ie<7. Utilise setInterval pour tes animation. bye
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
"sans utilisé l'opacité de la commande javascript."

Il y a une commande JS pour l'opacité ?! ;)

Tu devrais tester sous IE<7
Messages postés
152
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
29 avril 2009

pour dévélopper j'aime me casser la tête ^^,par contre je prend note pour le changement de taille je vais retravaillé le script avec ton exemple :)
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
33
De rien, tu peus t'inspiré de mon travail, si tu veus un peut d'aide, je peus t'aider en PV, je peus également te filer un peut de code pour temontrer comment faire si tu n'y arrive vraiment pas...

Pour la taille de la page, utilise les deux fonction que je t'ai conseillé mais par contre, il faudra ajouter 20px en plus je crois...

Et dernier point, ne te laisse pas avoir, firefox et IE vont te sortir une erreur bidon si tu ne rajoute pas le px a la fin...

Exemple :

document.getElementById('element').style.height = document.body.offsetHeight; //ne marchera que sur IE
document.getElementById('element').style.height = document.body.offsetHeight+"px"; //marchera partout

Code normalement compatible tout navigateur (IE6, IE7, FF2, FF3, K-melon, safari, opéra, gecko, etc...) !

a++

Ps : de rien pour les remarques pertinantes !
Afficher les 12 commentaires

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.