begin process at 2012 02 14 03:37:22
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > SESAME OUVRE TOI

SESAME OUVRE TOI


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :portes, effet, graphisme, gadget Niveau :Débutant Date de création :23/06/2008 Date de mise à jour :15/07/2008 15:09:19 Vu / téléchargé :7 005 / 616
Auteur : kazma

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

 Description

c'est une porte que l'on ouvre plutot gadget qu'autre chose a titre indicatif le script s'adapte automatiquement a la resolution ecran on peut donc changer les image de porte sans modifie le script. les images des portes ainsi que le bouton son insere dans un div qui a la fin de l'ouverture des porte est supprime ainsi que son contenu (les images); la fonction de couleur est en option. compatible IE FF Opera Safari

Source

  • <html>
  • <head>
  • <title>menu</title>
  • <script type="text/javascript">
  • var coul=1
  • var sd=1
  • function grille(){
  • document.getElementById('gd').style.left=document.getElementById('gd').offsetLeft+10+"px";
  • document.getElementById('gg').style.left=document.getElementById('gg').offsetLeft-10+"px";
  • if(document.getElementById('gd').offsetLeft>=(document.body.clientWidth/2)+10){
  • document.getElementById('erq').parentNode.removeChild(document.getElementById('erq'));
  • document.getElementById('ert').parentNode.removeChild(document.getElementById('ert'));
  • document.getElementById('btgrille').parentNode.removeChild(document.getElementById('btgrille'));
  • couleur();
  • return false;
  • }
  • setTimeout("grille()",16);
  • }
  • function couleur(){
  • if(coul==1){
  • document.bgColor="red";
  • document.fgColor="black";
  • }
  • if(coul==2){
  • document.bgColor="black";
  • document.fgColor="red";
  • }
  • if(coul==2){
  • coul=0;
  • }
  • coul=coul+1;
  • sd=sd+1;
  • if(sd==25){
  • document.bgColor="black";
  • document.fgColor="red";
  • sd=1;
  • return false;
  • }
  • else{
  • setTimeout('couleur()',300);
  • }
  • }
  • </SCRIPT>
  • </head>
  • <body bgColor="black" fgColor="red">
  • <div ID='ert'style='overflow:hidden;position:absolute;right:00;width:51%;height:100%;z-Index:15;'>
  • <img src="grilled.jpg" id="gd" style='position:absolute;left:0px;width:102%;height:100%'>
  • </div>
  • <div ID='erq'style='overflow:hidden;position:absolute;left:00;width:51%;height:100%;z-Index:15;'>
  • <img src="grilleg.jpg" id="gg" style='position:absolute;right:00px;width:102%;height:100%'>
  • </div>
  • <img id='btgrille'src='23.png'onmouseover='this.src="24.png"'
  • onmouseout='this.src="23.png"'style='position:absolute;z-Index:17;'onclick="grille()">
  • <font size=10 align=center>
  • congratulation congratulation congratulation<br>
  • congratulation congratulation congratulation <br>
  • congratulation congratulation congratulation <br>
  • congratulation congratulation congratulation <br>
  • congratulation congratulation congratulation <br>
  • congratulation congratulation congratulation <br>
  • </font>
  • </body>
  • </html>
<html>
<head>
<title>menu</title>
<script type="text/javascript"> 

var coul=1
var sd=1

function grille(){
document.getElementById('gd').style.left=document.getElementById('gd').offsetLeft+10+"px";
document.getElementById('gg').style.left=document.getElementById('gg').offsetLeft-10+"px";

if(document.getElementById('gd').offsetLeft>=(document.body.clientWidth/2)+10){
document.getElementById('erq').parentNode.removeChild(document.getElementById('erq'));
document.getElementById('ert').parentNode.removeChild(document.getElementById('ert'));
document.getElementById('btgrille').parentNode.removeChild(document.getElementById('btgrille'));
couleur();
return false;
}
setTimeout("grille()",16);
}


function couleur(){

if(coul==1){
document.bgColor="red";
document.fgColor="black";
}
if(coul==2){
document.bgColor="black";
document.fgColor="red";
}
if(coul==2){
coul=0;
}
coul=coul+1;
sd=sd+1;
if(sd==25){
document.bgColor="black";
document.fgColor="red";
sd=1;
return false;
}
else{
setTimeout('couleur()',300);
}
}

</SCRIPT>
</head>
<body bgColor="black" fgColor="red">

<div ID='ert'style='overflow:hidden;position:absolute;right:00;width:51%;height:100%;z-Index:15;'>
  <img src="grilled.jpg" id="gd" style='position:absolute;left:0px;width:102%;height:100%'>
 </div>

<div ID='erq'style='overflow:hidden;position:absolute;left:00;width:51%;height:100%;z-Index:15;'>
  <img src="grilleg.jpg" id="gg" style='position:absolute;right:00px;width:102%;height:100%'>
 </div>

<img id='btgrille'src='23.png'onmouseover='this.src="24.png"' 

onmouseout='this.src="23.png"'style='position:absolute;z-Index:17;'onclick="grille()">

<font size=10 align=center>
congratulation  congratulation congratulation<br>
congratulation congratulation congratulation <br>
congratulation congratulation congratulation <br>
congratulation congratulation congratulation <br>
congratulation congratulation congratulation <br>
congratulation congratulation congratulation <br>
</font>
</body>
</html>

 Conclusion

rien a dire

 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

26 juin 2008 22:51:01 :
remplacement de screen.avail par document.body.client qui a pour effet que les image s'adapte automatiquement a la taille de la fenetre alors qu'auparavant elle s'adaptait a la taille de l'ecran
30 juin 2008 21:52:48 :
mise aux norme oubli de deux lignes
15 juillet 2008 15:09:19 :
mise a l'echelle des portes en modifiant les style height et width qui etait exprime en pixel son maintenant exprime en pourcentage avantage plus besoin de cree un script pour l'adaptation a la page les image s'adaptent automatiquement meme en cas de redimensionnement de la fenetre.

 Sources du même auteur

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Source avec Zip CONVERTISSEUR D'IMAGE BASE 64
Toutes les sources de kazma

 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 FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Source avec Zip Source avec une capture JBLOCKS, EFFET APPARITION DAMIER par genepink
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
Source avec Zip Source avec une capture PONG PUDDING par circular

Commentaires et avis

Commentaire de jantosze le 24/06/2008 10:27:57

Salut,

Juste 2 remarques pour agrémenter le fun de ton module,
- coder un composant .js annexe avec une gestion sur événements mouse  et settime, ce qui permettrait d'intégrer + proprement dans une page,
- faire varier la transparence du fond page avec l'ouverture des portes (les portes étant au-dessus) ?

cdt
JAN

Commentaire de PetoleTeam le 26/06/2008 20:40:40

Bonjour,
Rapidement sur le gaz

- il est préférable de mettre <script type="text/javascript"> au lieu de <script>

- ajoutes l'unité sur le style.left et autres
exemple :
  document.getElementById('gd').offsetLeft +10 +"px";

- dès que l'on utilise deux fois document.getElementById pour le même ID autant faire
  var O_Div = document.getElementById('gd');
  O_Div.style.left = O_Div.offsetLeft+10

et enfin quand tu utilises screen.availWidth, il s'agit de la taille de l'écran et non celle de la fenêtre d'affichage donc si tu n'est pas en fullscreen c'est pas top...

Bonne continuation
;O)

Commentaire de kazma le 26/06/2008 22:53:41 administrateur CS

j'ai fait les modif pour que les image s'adapte automatiquement a la taille de la fenetre .plus besoin d'etre en plein ecran

Commentaire de PetoleTeam le 30/06/2008 18:51:03

Bonjour,
pourquoi ne pas avoir profité de l'occasion pour corriger les autres imperfections ?
;O)

Commentaire de kazma le 30/06/2008 22:06:16 administrateur CS

ok pour <script type="text/javascript">
ok pour +"px"
et en plus j'ai rajoute les point virgules en fin de ligne
par contre pour les document.getElementById a indexer en variable je n'ai pa voulu le faire car je trouve que le script est moins simple a cerner c'est donc volontairement que je le fait pour qu'il soit compris par la grande majorite novise amateur ou pro, pour moi l'indexation par des variable vient apres et reellement je ne pense pas que mon script soit fait pour un pro.
conclusion : c'est beau tous ca (lol)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

effet de fondu [ par seb019 ] Bonjour,Voila sur un site j'ai vu un truc qui me plait, je pense que c'est du javascript mais je suis pas sur :lorsqu'on clic sur un lien la page s'ou graphisme [ par Antidote ] AntidoteBonjour je voudrais savoir si il est possible d'afficher à l'écran des pixel de faço effet ouverture de page réactualisé [ par jlagabrielle ] Bonjour !J'ai mis le script suivant pour ouvrir mes pages avec un effet mais l'effet n'a lieu que lors de la première ouverture de la page, quand je r Effet de texte [ par romain2boss ] Salut,je suis pas un fan de javascript, et je cherche de puis un bon bout de temps un script de défilement de texte qui fasse un peu comme l'intro de effet livre [ par guyman ] Exist il un script pour faire un genre d effet d'un livre comme quand on change de page ou comme un cartable de photo Effet panoramique [ par isu_san ] Bonjour tout le monde, je suis tout nouveau dans l'obscur monde de la création de site et je suis à la recherche d'un script qui me permettrait de me effet de survol sur une colonne [ par matt438 ] salutj'ai pb de création javscript/cssje voudrais créer un effet de survol sur une colonne d'un tableau. je n'ai réussi qu'à le faire en appelant l'id Effet d'image survolée [ par JoJo738 ] effet en image [ par astuces_jeux ] salut les mecs,Je cherche comment on fait que qand on met le curseur sur une image c'est une autre image qui apparetcomment on fait ???merci de m'aide


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Beautiful woman in a bikini meditating on the beach
Photo Sparkling lagoon in the south pacific, Moorea, French Polynesia 

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,655 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)