begin process at 2012 02 11 04:35:39
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT

ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :javascript, image, png, html, effet ralenti Niveau :Débutant Date de création :30/08/2008 Date de mise à jour :30/08/2008 17:18:55 Vu / téléchargé :10 004 / 789
Auteur : djmmix

Ecrire un message privé
Site perso
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

30 août 2008 17:18:55 :
correction d'ortographe :)

 Sources du même auteur

Source avec Zip ANIMATION DE DEUX IMAGES EN VA ET VIENS ET S'ADAPTE A L'ECRA...
Source avec Zip MENU DÉROULANT ET AIDE INTERACTIF
Toutes les sources de djmmix

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip POUR LES DÉBUTANTS EN JAVASCRIPT par lecurieux41
Source avec Zip DICOFOU DICTIONNAIRE FANTAISISTE EN JAVASCRIPT par lecurieux41

Commentaires et avis

Commentaire de nicomilville le 31/08/2008 10:56:40

Salut,

J'ai pas bien compris a quoi ça sert...

Ce n'est qu'un div noir a moitier transparent qui recouvre la page...

a++

Commentaire de djmmix le 31/08/2008 12:34:54

en faite le recouvrement de la page par un div noir semi-transparent servirai pour mettre en avant plan une fenêtre de login ou un diaporama sans changer de page ou bien sur d'autre fenêtre de son choix

Commentaire de nicomilville le 31/08/2008 12:38:03

J'ai déja fait une source de ce type, pourquoi en refaire une ?

a++

Commentaire de djmmix le 31/08/2008 12:46:04

ha désolé je ne savais pas que tu en avait fait une :s

Commentaire de nicomilville le 31/08/2008 12:56:06

pas grave, tu ne pouvais pas savoir, moi je ne l'avais pas marqué en gros sur le titre en fait c'est plutot une boite de dialogue (celle du site)...

Il y a un moyen beaucoup plus simple et moins lourd de faire ça...

La tu utilise une image (c'est lourd), je te conseille de plutot utiliser un div avec une cour d'arrière plan (noir) une opacité de 0.7 (70), bordure a 0, top a 0, left a 0, position a absolute...

Une fonction javascript qui calcul la taille de la page avec document.body.offsetHeight et document.body.offsetWidth et qui l'attribut au div...

Et voila, tu obtient le même résultat...

Après pour faire encore mieux, fait une fonction qui recalcule la taille du div quand on resize la page...

a++

Commentaire de nicomilville le 31/08/2008 13:01:42

Après avoir mieux regarder j'ai vu qu'en fait tu utilise un div mais il y a quand même un bug dans ton code...

Déja quand on est en position absolute et qu'on sroll avant de griser en bien tu vera qu'il y aura une partie griser et une autre non griser...

J'ai résolu ce problème avec offsetHeight et offsetWidth, car le 100% en position absolute ça ne grise que la partie de la page que tu vois sans scroller, essai de scroller, et tu verra de quoi je te parle...

a++

Commentaire de djmmix le 31/08/2008 13:33:36

merci je vais corrigé sa ^^ merci de tes remarques pertinante ^^

Commentaire de nicomilville le 31/08/2008 14:26:42

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 !

Commentaire de djmmix le 31/08/2008 17:45:34

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

Commentaire de XtremDuke le 01/09/2008 15:28:01

"sans utilisé l'opacité de la commande javascript."

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

Tu devrais tester sous IE<7

Commentaire de Kimjoa le 01/09/2008 22:08:42

parreil que XtremDuke, le png n'est pas pris en charge pour ie<7. Utilise setInterval pour tes animation. bye

Commentaire de kazma le 01/09/2008 23:16:13 administrateur CS

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Faire une ROTATION d'une image avec HTML ou JAVASCRIPT ? [ par maxxcbenny ] Bonjour,Quelqu'un connait-il le moyen de faire subir une rotation à une image dans un navigateur web ? Avec un angle libre de 0° à 360° évidement ?Par comment faire pour avoir plusieur fonction en javascript [ par jovelyn ] Bonjour,j'aimerais comprendre comment on fait pour faire fonctionner (dans mon cas 2) fonction javasrcript sur une même page (html)?j'ai déjà lu :1) Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur Html / JavaScript...Je m'enmèle les pinceaux... [ par ds2kx ] Salut...voila je fais mon site et donc en INDEX c une page de garde avec le logo et un bouton ENTRER mais la quand on clique sur ENTRER j'aimerais bie menu html & javascript [ par gerteis ] je souhaite validé une liste deroulante du type &lt;select&gt; avec une fonction onmouse.Je ne connais pas javascript quelqu'un peut il m'aider ? une dose de Javascript,une pincée d'HTML et le tout soupoudré de Pascal [ par poihonss ] J'écris un programme en Pascal où j'utilise du javascript et du Html.Mon problème et que j'ai une liste à choix multiple mais que je n'arrive pas à ré Preview avancée d'images JAVASCRIPT [ par dreamed ] Bonjour,J'essaie de mettre en place sur mon site une fonction de preview d'image à partir de champ file (avant téléchargement).J'ai déjà un script qui Problème d'affichage en HTML [ par mouniersophie ] Bonjour a tous,je débute dans cette programmation et j'essaye d'afficher un texte suivie d'une image à un certain endroit de ma page comme suit :&lt;D débutante-intégrer du javascript dans du html [ par tcia ] bonjour,j'ai trouvé un code source sur ce sitewww.javascriptfr.com/code.aspx?id=15751j'aimerais l'intégrer à du code html. j'ai donc plusieurs questio pb javascript popup image [ par kobeenforce ] &lt;html&gt;&lt;head&gt;&lt;title&gt;Diaporama&lt;/title&gt;&lt;SCRIPT LANGUAGE="Javascript" src="./Images.js"&gt; &lt;/script&gt;&lt;SCRIPT LANGUAGE=


Nos sponsors


Sondage...

Comparez les prix


Sony Ericsson XPERIA X10 (1 Go)
Entre 649€ et 649€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,850 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)