Menu image actif selon page
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:
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" :
Code:
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> |
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
Merci d'avance pour votre aide !
