javascript et barre de navigation - Javascript/Node.js - Programmation
Marsh Posté le 30-06-2016 à 16:56:24
Salut,
Déjà ton script boucle sur tous les liens de ta page ce qui comprend également la navigation donc c'est dégueux:
Code :
|
Je te conseille d'ajouter une classe css sur tes liens qui servent au photos comme par exemple:
Code :
|
et tu changes ton getElementsByTagName par getElementsByClassName l'avantage c'est que tu pointes uniquement sur tes liens d'image
Code :
|
autre chose tu n'es pas obligé de créer une variable pour connaitre la taille du tableau tu peux directement mettre dans la condition de ta boucle for, par contre bien mettre le var i = 0 à cause du changement précédent
Code :
|
Marsh Posté le 03-07-2016 à 18:24:15
Salut
merci beaucoup pour tes conseil, tu m'a rendu un gros service, je ne savais plus comment faire depuis plusieurs semaines.
grâce tes corrections je peux enfin finir mon site
merci
Grisou-57
Marsh Posté le 19-06-2016 à 11:37:41
bonjour a tous
j'ai un gros bug pour mon site; j'ai un code javascript qui me permets d'agrandir et de réduire une photo.
j'ai un fichier de grandes images et un de petites. le code fonctionne très bien mais il pollue ma navigation.
quand je veux changer de page j'arrive sur une page vierge.
voici mon code, si quelqu'un a une solution je suis preneur.
ps: mes connaissances en javascript sont limitées.
merci d'avance
<div id="menu">
<nav>
<ul>
<li><a href="#">Acceuil</a>
</li>
<li><a href="galerie.html">Galerie</a>
</li>
<li><a href="macro.html">Macro</a>
</li>
<li><a href="#">Carnet de voyages</a>
<ul>
<li><a href="madere-portugal.html">Madère, Portugal</a></li></ul>
</li>
<li><a href="blog.html">Blog</a>
</li>
<li><a href="#">A propos</a>
<ul>
<li><a href="lephotographe.html">Le photographe</a></li>
<li><a href="mentions-legales.html">Mentions légales</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="grdgalerie"></div>
<p>
<a href="photos_galerie_web/grandes_vignettes/champs_en_fleur+le.jpg"height="450" width="790" alt="Champs en fleurs" title="champs en fleur"> <img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="266" alt="miniature"/></a>
<a href="photos_galerie_web/grandes_vignettes/coucher_de_soleil+le.jpg"height="450" width="790" title="Afficher l'image originale"><img src="photos_galerie_web/petites_vignettes/coucher_de_soleil.jpg" height="160" width="266" alt="Miniature"/></a><span>Coucher de soleil</span>
</p>
<script>
var links = document.getElementsByTagName('a'),
linksLen = links.length;
for (var i = 2 ; i < linksLen ; i++) {
links[i].onclick = function() {
displayImg(this);
return false;
};
}
function displayImg(link) {
var img = new Image(),
grdgalerie = document.getElementById('grdgalerie');
img.onload = function() {
grdgalerie.innerHTML = '';
grdgalerie.appendChild(img);
img.src = link.href;
grdgalerie.style.display = 'block';
grdgalerie.innerHTML = '<span>Chargement en cours...</span>'; }
document.getElementById('grdgalerie').onclick = function() {
this.style.display ='none';
};
</script>