No-Repeat JQUERY functions

Bonsoir à tous ceux qui pourront voir mon message, maintenant ou dans 5ans ,

Ma page index se compose de mon body et d'un div#intro qui contient une animation flash, lequel div#intro "fadesOut" en Jquery après quelques secondes, et laisse place à { mon header + mon menu + mon div de contenu } qui eux "fadeIn".
(Je vous colle le code juste après quelques explications).

Mon div#intro disparait comme convenu, ça roule. Mon div de contenu s'affiche juste après, c'est parfait !
Sauf que dans mon div de contenu, j'ai placé une image-bouton qui permet au user, on click, de changer de body. Cela fonctionne aussi , cool !
Mais le problème c'est que { mon header + mon menu + mon div de contenu } héritent des propriétés jquery initialement indiquées, alors que je les veux { mon header + mon menu + mon div de contenu } fixes après le click sur mon image-bouton, et non pas qu'ils "fadeIn" après le delay indiqué pour l'intro !!!

Assez de bavardages, je vous colle mon code (raccourci en terme de d'ids et de class css pour faire du code court )
:

[code=html]
<div id="intro">




<object type="application/x-shockwave-flash" data="marina_webdesign.swf" style="width:800px;height:576px;">
<param name="base" value="marina_webdesign.swf"/>
<param name="movie" value="marina_webdesign.swf"/>
<param name="quality" value="high" />
<param name="wmode" value="transparent"/>
<param name="menu" value="true"/></object>
</div>


<div id="texte_accueil">
<h1 id="bienvenue"> Bienvenue sur<span class="gris_shadow">  marina webdesign </span></h1>
<div class="barre_blanche"> </div>

<p class="gris">bla bla bla  </p>
<p class="gris"> Euh, au fait : certaines personnes en voyant ce mur vierge et décrépit iraient tout de suite le tagguer. Pas vous ? </p>
<a href="page_taggee.php"> <img src="img/bouton_taggueur.png" id="bouton_taggueur" alt="" /> </a>
</div>

body {width:100%; background-color:#000; background-image:url(img/background.jpg); }
body#body_taggued {width:100%; background-color:#000; background-image:url(img/background_tagged.jpg); }


#header {width:100%; height:100px; margin-top:0px; margin-bottom:0px;  background-image:url(img/header.gif);background-repeat:no-repeat;}

#menu {margin-left:30%; padding-top:53px; height:60px; width:100%; }
#ul li etc je vous passe les détails de mon Menu pour raccourcir le code

/*  ___________  Div intro flash ________________________________ */
#intro {width:800px; height:576px; margin-left:275px; margin-top:35px; position:absolute;}

/*  ___________  index ________________________________ */
@font-face {font-family:aaaiight; src:url("aaaiight.ttf");
                 font-family:bopollux; src:url("bopollux.ttf");}

div#texte_accueil {width:800px; height:auto; position:relative;}


h1#bienvenue {text-align:center; color:#000; font-family:Arial, Helvetica, sans-serif; }

.gris_shadow {color:#fff; font-family:bopollux;}



p.gris {color:#999999; font-size:100%; font-family:Arial, Helvetica, sans-serif;}


#bouton_taggueur {width:150px; height:47px; }
#bouton_nettoyeur {width:150px; height:47px; ;}

$(document).ready(function()  {    $("#header, #menu, #texte_accueil").hide();
						$("#intro").delay(3500).fadeOut(1000);
						$("#header").delay(4500).fadeIn(4000); 
						$("#menu").delay(4500).fadeIn(4000); 
						$("#texte_accueil").delay(4500).fadeIn(4000);
					   });


											    							
												
$(function() {$("#bouton_taggueur").hover(function() { $(this).attr("src","img/bouton_taggueur_hover.png");
                                                                         }, function(){
                                                                 $(this).attr("src", "img/bouton_taggueur.png");        
													 											
											});
        	}); 
				                                    
													   


$(function() {$("#bouton_nettoyeur").hover(function(){ $(this).attr("src","img/bouton_nettoyeur_hover.png");
                                                   }, function(){
                                                                 $(this).attr("src", "img/bouton_nettoyeur.png");          
                                                                 });
				
            });

[/code]


j'ai essayé 100 fois

(function() {$("#bouton_taggueur").click(function() {$("#texte_accueil").show();
}); });

et 50'000 variantes, mais ça marche pas !


J'espère que mon code est assez clair, et que ma question sera bien accueillie...... [certains helpers cassent en 2 les pauvres débutants, et c'est pas cool !!!!!!!!!! ]

Merci d'avance, peace
:
Modifié par Vape6 (26 Aug 2013 - 00:16)

Bonjour.

Désolé j'aurais bien mis 18h pour lire ton message !

Alors avant tout chose, ton code me fait un peu peur... hé hé... je m'explique... il me semble que tu t'amuses sur ton hover du bouton à faire du js, je ne saurai que te conseiller de faire du css pour ça, c'est fait pour.

Ensuite il préférable de mettre tes event dans le document ready (ainsi que tout ton code d'ailleurs).

Et enfin pour ton problème, si j'ai bien compris, c'est lors du clic sur ton bouton ton code qui est actuellement dans le document ready se relance.
Ce qui parait normal, étant donné que tu changes complètement de page (page_taggee.php),
alors la solution possible est de mettre à jour ta page en ajax à l'intérieur de ta page actuelle (ou alors de ne pas changer de page ) et donc l'event ready n'est pas rappelé.

Voilà, j'espère t'avoir aidé...

Bonsoir,

Merci pour ta réponse SolidSnake...
Bon j'ai suivi ton conseil et ai mis mon bouton_taggueur :hover avec CSS lequel taggue ma page index en cours.

Merci pour tes indications.

Modifié par Vape6 (27 Aug 2013 - 00:01)