¿Cómo abrir un enlace al tocar una imágen?

Question

Hola, quisiera hacer que la imagen actual del deslizador de imágenes del siguiente código funcione como un botón que al hacer clic sobre ella abra un enlace.¿ Alguien puede decirme alguna forma de hacerlo?
https://code.sololearn.com/WLv8aYFZF442/?ref=app

Answer 1

https://code.sololearn.com/W3gtP4XmNqIw/?ref=app

Answer 2

wrap your <img> in an anchor (link) tag <a> with href attribute containing the target url (instead of "#" in below example):

<a href="#" id="slider-link"><img id="slider" src="https://cdn.pixabay.com/photo/2012/04/14/14/43/dragon-34167__480.png" width="80%" height="auto" /></a>

and modify your css rules by:

#slider-link {
position: absolute;
border-radius:20px;
width:300px;
height:300px;
left: calc(32vw - 16vh);
}
#slider{
border-radius:20px;
width:100%;
height:100%;
border-radius:20%;
background-color:white;
}

Answer 3

Sorry for not expressing myself well. In that example both images share the same link and I want each image to have its own link. Sorry for my terrible english

Answer 4

they share the same link if you doesn't update its 'href' property through javascript, as you update the 'src' property of the image element ;)

I don't have provided the required js modifications to do, as it seems obvious that you are able to handle it by yourself and i did not know wich target url(s) you want to use ^^

if you need help for that also, feel free to ask ;P

Answer 5

The truth is that I do need help for that😅. If you leave me the necessary js modifications, you would do me a great favor😊. The URLs are as follows
URL1: https://code.sololearn.com/W6o0C8B2QP14/?ref=app
URL2: https://code.sololearn.com/WAW6t544Va7r/?ref=app

Answer 6

Excelent