begin process at 2010 03 21 11:05:23
  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é :7 915 / 632
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

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec une capture MENU ANIMÉ AVEC IMAGE SURVOLÉE ! par TheBigBananier
FAIRE PASSER DES VARIABLES JAVASCRIPT EN VBSCRIPT ET INVERSE... par stfou
Source avec Zip Source avec une capture UN GÉNÉRATEUR HTML COMME BEAUCOUP D'AUTRE par DomJ
Source avec Zip INFOS BULLE PERSONNALISÉES par abdelaziz_info
Source avec Zip HTML,XSLT ET XML LIRE LES DONNEES D'UN XML POUR AFFICHAGE SO... par Loubiou

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

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


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo ciel d'oragePhoto corne de cerf 2
Photo vue aerienne de Penmern, Golfe du Morbihan (56) 

Visiter la photothèque
 
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 : 0,983 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)