Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

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


Information sur la source

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é: 4 886 / 323

Note :
Aucune note

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

Pour les "Membres Club", vous pouvez 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 :)

Commentaires et avis

signaler à un administrateur
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++

signaler à un administrateur
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

signaler à un administrateur
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++

signaler à un administrateur
Commentaire de djmmix le 31/08/2008 12:46:04

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

signaler à un administrateur
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++

signaler à un administrateur
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++

signaler à un administrateur
Commentaire de djmmix le 31/08/2008 13:33:36

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

signaler à un administrateur
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 !

signaler à un administrateur
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 :)

signaler à un administrateur
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

signaler à un administrateur
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

signaler à un administrateur
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...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.