onclick sur une image pour naviguer vers une autre page en utilisant Javascript
Je me réchauffe avec Javascript donc j'essaie quelque chose par moi-même. Je suis à la recherche d'une fonction onclick, où j'ai des images miniatures dans mon index.la page html, et chaque fois qu'un utilisateur clique sur l'image, il sera redirigé vers une nouvelle page où l'image est à nouveau affichée avec quelques informations à ce sujet. En ce moment, je le fais en utilisant simplement du HTML.
Je veux utiliser javascript pour naviguer vers la page correspondant à l'image que l'utilisateur a cliqué. Est-ce possible de faire à l'aide de onclick? J'ai plus de 10 images sur ma page web et chaque fois qu'un utilisateur clique sur une image que je veux obtenir l'id de l'image et le rediriger vers la nouvelle page. La nouvelle page est nommée d'après le nom de l'image.
Pour ex: nom de l'image: bouteille.jpg (résidant dans le dossier images) rediriger le nom de la page: bouteille.html (résidant dans le dossier principal)
<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>
Toute information précieuse sera appréciée!
Si c'est quelque part demandé dans ce forum, il serait utile que quelqu'un puisse donnez-moi le lien.
Merci, Raaks
4 réponses
Peut-être que c'est ce que vous voulez?
<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>
Edit: gardez à l'esprit que toute personne qui n'a pas javascript activé ne sera pas en mesure de navaigate à la page de l'image....
Parce que cela rend ces choses si faciles, vous pouvez envisager d'utiliser une bibliothèque JavaScript comme jQuery pour faire ceci:
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Fondamentalement, il attache un événement onClick à toutes les images avec la classe thumbnail pour rediriger vers la page HTML correspondante(id + .html). Ensuite, vous n'avez besoin que des images dans votre HTML (sans les éléments a), comme ceci:
<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />
Je configurerais votre HTML comme ceci:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Ensuite, utilisez le code suivant:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
</script>
Qui affecte un gestionnaire d'événements onclick à chaque image de la page (ce n'est peut-être pas ce que vous voulez, vous pouvez le limiter davantage si nécessaire) qui change la page actuelle à la valeur de l'attribut images id plus l'extension .html. C'est essentiellement L'implémentation JavaScript pure de la réponse jquery de @JanPöschko.
Vous pouvez définir une fonction de clic, puis Définir l'attribut onclick pour l'élément.
function imageClick(url) {
window.location = url;
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
Cette approche vous permet de vous débarrasser des environs <a> élément. Si vous voulez le conserver, définissez l'attribut onclick sur <a> au lieu de sur <img>.