Accueil > > > ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT
 ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT
 Information sur la source
 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
- <!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% )
 Historique
- 30 août 2008 17:18:55 :
- correction d'ortographe :)
 Sources de la même categorie
 Commentaires et avis
 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 <select> 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 :<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 ]
<html><head><title>Diaporama</title><SCRIPT LANGUAGE="Javascript" src="./Images.js"> </script><SCRIPT LANGUAGE=
|
Derniers Blogs
 TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|