AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 01 09 21:53:01
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 !

SESAME OUVRE TOI


Information sur la source

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é: 4 562 / 411
Auteur : kazma Ecrire un message privé
Note :
Aucune note
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

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

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.

Commentaires et avis

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

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

signaler à un administrateur
Commentaire de kazma le 26/06/2008 22:53:41

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

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

signaler à un administrateur
Commentaire de kazma le 30/06/2008 22:06:16

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

différents effets sur les liens d'une meme page [ par geoffroy ] Salut, J'aimerais savoir comment fait on pour qu'un lien devienne plus gros au survolage de la souris . Mais j'aimerais que cet effet ne marche que su 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

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

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,733 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é.