Bonjour à tous,
débutant en javascript, me voilà confronté à mon premier problème. Je suis en train de créer mon site perso (www.2buzzy.fr), mais je bloque sur l'affichage de mon menu image. En effet, une fonction javascript me permet de ne pas rafraichir ma page. Elle va chercher le div que je veux sur une autre pas donnée et la charge sur mon index.html avec un petit effet sympa. Cependant pour pouvoir linker n'importe quelle page de mon site, un tag est ajouté en fin d'URL.
Exemple pour mon contenu de /contact.html, l'url est 2buzzy.fr/#contact
Afin de modifier mes images menu par rapport à mon contenu, j'ai rajouté quelques lignes dans mon script, et là c'est le drame.
J'identifie le hash de ma page, et en fonction je change le contenu de mon bloc image menu correspond par une autre image, cela marche bien, UNE seule fois. Ensuite ça me charge une autre page...
Voici mon script pour le chargement de mon contenu "contact" : (voir commentaires pour les lignes que j'ai ajouté pour le changement de menu)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 (document).ready(function() { var hash = window.location.hash.substr(1); var href = $('#contact a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #page'; $('#page').load(toLoad) } }); $('#contact a').click(function(){ document.title = "2buzzy | Contact"; //-----------MODIFICATION----------- if((window.location.hash)=='#travaux') document.getElementById("travaux").innerHTML = "<a href=\"travaux.html\" title=\"Mes réalisations\" ><img src=\"img/travaux1.png\" onmouseover=\"javascript:this.src='img/travaux2.png';\" onmouseout=\"javascript:this.src='img/travaux1.png';\" name=\"travaux\"></a>"; //-----------FINMODIFICATION----------- var toLoad = $(this).attr('href')+' #page'; $('#page').hide('fast',loadpage); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadpage() { $('#page').load(toLoad,'',showNewpage()) } function showNewpage() { $('#page').show('normal'); } //-----------MODIFICATION----------- document.getElementById("contact").innerHTML = "<a href=\"contact.html\" title=\"Contactez-moi\" ><img src=\"img/contact3.png\" name=\"contact\"></a>"; //-----------FINMODIFICATION----------- return false; }); });
Et voici mon code HTML pour ce qui est du bloc "contact" :
Ce n'est pas un problème bien méchant, et pourtant je n'arrive pas à le résoudre. N'hésitez pas à aller voir directement sur mon site pour comprendre le pourquoi du comment : www.2buzzy.fr
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <div id="contact"> <a href="contact.html" title="Contactez-moi" ><img src="img/contact1.png" OnMouseOver="javascript:this.src='img/contact2.png';" OnMouseOut="javascript:this.src='img/contact1.png';" name="contact"></a> </div>
Merci d'avance pour votre aide !
Partager