web-dev-qa-db-fra.com

Cliquez sur une image pour naviguer vers une autre page à l'aide de Javascript

Je m'échauffe avec le langage Javascript, j'essaie donc quelque chose par moi-même. Je recherche une fonction onclick, où j'ai des images miniatures dans ma page index.html, et chaque fois qu'un utilisateur clique sur l'image, il est redirigé vers une nouvelle page où l'image est à nouveau affichée avec des informations à son sujet. En ce moment, je le fais en utilisant simplement du HTML.

Je souhaite utiliser javascript pour accéder à la page correspondant à l'image sur laquelle l'utilisateur a cliqué. Est-ce possible d'utiliser onclick? J'ai plus de 10 images sur ma page Web et chaque fois qu'un utilisateur clique sur une image, je souhaite obtenir l'identifiant de cette image et la rediriger vers la nouvelle page. La nouvelle page est nommée d'après le nom de l'image.

Par exemple: nom de l'image: bottle.jpg (résidant dans le dossier images) nom de la page de redirection: bottle.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 cela est demandé quelque part dans ce forum, il serait utile que quelqu'un puisse me donner ce lien.

Merci Raaks

javascriptonclick
25
125369

c'est peut-être ce que tu veux?

<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
    <img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>

modifier: gardez à l’esprit que ceux qui n’ont pas javascript activé ne pourront pas accéder à la page d’image ....

28
Johnny Craig

Parce que cela facilite tellement ces choses, vous pouvez envisager d’utiliser une bibliothèque JavaScript comme jQuery pour le faire:

<script>
    $(document).ready(function() {
        $('img.thumbnail').click(function() {
            window.location.href = this.id + '.html';
        });
    });
</script>

Fondamentalement, il associe un événement onClick à toutes les images de classe thumbnail afin de le rediriger vers la page HTML correspondante (id + .html). Alors vous avez seulement besoin 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" />
18
Jan Pöschko

Je configurerais votre code HTML comme suit:

<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>

Cela attribue un gestionnaire d'événement onclick à chaque image de la page (ce n'est peut-être pas ce que vous voulez, vous pouvez le limiter davantage si nécessaire), ce qui change la page actuelle en valeur des images id attribut plus l'extension .html. Il s’agit essentiellement de l’implémentation purement Javascript de la réponse jQuery de @ JanPöschko.

8
Anthony Grist

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 de l'environnement environnant <a> élément. Si vous souhaitez le conserver, définissez l'attribut onclick sur <a> au lieu de <img>.

3
Hristo