Clickable image redirecting to another HTML page

Asked

Viewed 1,505 times

2

I am very beginner in programming, however, to train I am doing an RPG in Browser, and the home page is the choice of class, and I want the person to choose, click the image and this image redirect to a new page, using the event "onclick"depending on the person’s choice. Would it be possible?

<html>

<head>

    <title> RPG in Browser </title>

    <link href="../../CSS/Projeto 01/Página 01.css" rel="stylesheet">

</head>


<div id="TabelaCentral">

    <table id="Tabela">

        <tr>

            <td id="Classe"> <b id="Font35"> Mago </b> </td>

            <td id="Classe"> <b id="Font35"> Arqueiro </b> </td>

            <td id="Classe"> <b id="Font35"> Guerreiro </b> </td>

        </tr>

        <tr>

            <td> <img src="../../Imagens/Projeto 01/Página 01/Mago.jpg" id="ImagemClasse" onClick="alert ('Clicou')"> </td> 

            <td> <img src="../../Imagens/Projeto 01/Página 01/Arqueiro.jpg" id="ImagemClasse">  </td>   

            <td> <img src="../../Imagens/Projeto 01/Página 01/Guerreiro.jpg" id="ImagemClasse"> </td>

        </tr>



    </table>

</div>

javascript html onclick

  • Perry, do you want to use javascript for this? Because it is not necessary, only with html you can create a clickable image, with the <a> tag and within it the <img tag>.

  • has a game that was written only with javascript, candybox, which was not necessary for the developer to use more than one page, maybe you can write everything on one page, and then hide and display the text according to what you want to display on the screen.

2 answers

2


No need to use Javascript in this case

If you just want to redirect to another page, you don’t even need Javascript, just using the attribute href:

<a href="/users/69296">
  <img
    src="https://i.stack.imgur.com/8Ynld.jpg"
    width="100"
    height="100"
  />
</a>

If you want to use Javascript anyway

But you can also use Javascript if you want to create a slightly more complex behavior:

const image = document.querySelector('img');

image.addEventListener('click', (event) => {
  const { src } = event.target;
  alert(`Atributo de origem da imagem: "${src}".`);

  // Redirecionar para outra página:
  location.replace(src);
});
<img
  src="https://i.stack.imgur.com/8Ynld.jpg"
  width="100"
  height="100"
/>

Note that in the above example, I did not use the native HTML attribute onclick, since your practice is not very recommended. If you want to follow best practices, prefer to use the addEventListener to add a Listener of events.

Also, in the example above, I added the Listener to only one element. That is, the first element found with the tag img. If you want to add the Listener to multiple elements, read this other answer.

  • For now I prefer to use Onclick because it’s more basic and easy to understand, but thanks for the answer. But where would I put the <a> tag? Since I need each class to redirect to a different page, it would have to be in the <td> of each class right? Dai would be : <td> <a href="http://answall.com/users/69296"> <img src="https://i.stack.Imgur.com/8Ynld.jpg" width="100" height="100"/> </a> </td> ;?

0

You can use the following code:

<a href="ENDEREÇO DO SITE"><img src="ENDEREÇO DA IMAGEM"></a>

Browser other questions tagged javascript html onclick

You are not signed in. Login or sign up in order to post.