it-swarm-pt.tech

clique em uma imagem para navegar para outra página usando Javascript

Estou me aquecendo com Javascript, então estou tentando algo sozinho. Estou procurando uma função onclick, na qual tenho imagens em miniatura na minha página index.html, e sempre que um usuário clicar na imagem, ele será redirecionado para uma nova página na qual a imagem é novamente exibida junto com algumas informações. Agora eu estou fazendo isso usando apenas HTML simples.

Quero usar o javascript para navegar para a página correspondente à imagem na qual o usuário clicou. Isso é possível usando onclick? Tenho mais de 10 imagens na minha página da Web e cada vez que um usuário clica em uma imagem, quero obter o ID dessa imagem e redirecioná-la para a nova página. A nova página é nomeada após o nome da imagem.

Por exemplo: nome da imagem: bottle.jpg (residente na pasta images) redirecione o nome da página: bottle.html (residente na pasta principal)

<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>

Qualquer informação valiosa será apreciada!

Se for solicitado em algum lugar neste fórum, seria útil se alguém pudesse me fornecer esse link.

Obrigado, Raaks

25
125369

talvez seja isso que você quer?

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

editar: lembre-se de que qualquer pessoa que não possua o javascript ativado não poderá navegar para a página da imagem ....

28
Johnny Craig

Como isso facilita muito, você pode considerar o uso de uma biblioteca JavaScript como jQuery para fazer isso:

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

Basicamente, ele anexa um evento onClick a todas as imagens da classe thumbnail para redirecionar para a página HTML correspondente (id + .html). Então você só precisa das imagens no seu HTML (sem os elementos a)), assim:

<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />
18
Jan Pöschko

Eu configuraria seu HTML assim:

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

Em seguida, use o seguinte código:

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

Isso atribui um manipulador de eventos onclick a todas as imagens da página (isso pode não ser o que você deseja, você pode limitar ainda mais se necessário) que altera a página atual para o valor do atributo images id além da extensão .html. É essencialmente a implementação Javascript pura da resposta jQuery do @ JanPöschko.

8
Anthony Grist

Você pode definir uma função de clique e definir o atributo onclick para o elemento.

_function imageClick(url) {
    window.location = url;
}

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
_

Essa abordagem permite que você se livre do elemento _<a>_ circundante. Se você deseja mantê-lo, defina o atributo onclick em _<a>_ em vez de em _<img>_.

3
Hristo