2

Existe alguma maneira de colocar um evento onclick em imagem? Testei com um botão e está funcionando a chamada para a função, porém, queria usar uma imagem.

Tentei algo como:

<a href="#">
   <img src="imagens/search.png" onclick="ocultaForm()">
</a>

Porém, não está executando a função ocultaForm(), só redireciona para #

2
  • Por que vc não faz assim: <a href="#" onclick="ocultaForm()"> ?
    – hugocsl
    2/02/2018 às 12:23
  • @hugocsl tentei, mas não executa a função 2/02/2018 às 12:24

5 Respostas 5

4

O onclick funciona perfeitamente em um elemento <img>, o problema é que sua imagem está contida em um <a>, então quando você clica é executado o click no link.

Segue exemplo:

function ocultaForm(){
  console.log("Oi mundo!");
}
<img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" onclick="ocultaForm()">

2

    $(document).ready(function() {
        $('.thumbnails').click(function() {
            alert('teste');
           // ocultaForm(); pode chamar aqui
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />

function ocultaForm(){
    alert();
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onClick="ocultaForm()" />

2
  • 1
    Poderia editar sua resposta e explicar ela ? Para o AP entender aonde estava o erro.
    – NoobSaibot
    2/02/2018 às 14:50
  • O problema é que sua imagem está dentro de em um link toda vez que clica no link ele executa o link..
    – LR10
    2/02/2018 às 15:21
1

Para funcionar do jeito que você esta tentando, basta remover o atributo href da tag a, e lógico que a função de existir caso contrário não funcionará!

var clicks = 1;
function ocultaForm() {
  alert('VOCÊ CLICOU NA IMAGEM!');
  if (clicks === 1) {
    console.log('Você clicou ' + clicks + ' vez na imagem!');
  } else {
    console.log('Você clicou ' + clicks + ' vezes na imagem!');
  }
  clicks++;
}
a {
  cursor: pointer;
}
img {
  width: 200px;
}
<a>
   <img src="http://www.voluntersul.com.br/editor/Image/clickaqui.png" onclick="ocultaForm()">
</a>

0

tirando o link você conseguiria fazer assim:

<img src="imagens/search.png" onclick="ocultaForm()" style="cursor:pointer"/>
1
  • Não executa a função. 2/02/2018 às 12:27
0

    function teste(){
      console.log('fui clicado');
   }
  
  <img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" onclick="teste();"/>
   
    

Tente assim e veja se é o que você precisa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .