Como posso alcançar esse efeito com jQuery ou CSS?

Question

É possível alternar o HTML no clique?

Eu tenho uma página de índice com uma imagem grande. Sob a imagem, existem quatro links. Quando o cursor rola sobre um link, eu gostaria que uma pequena dica de ferramenta aparecesse. Se o usuário clicar no link, eu quero que a imagem grande seja alterada e algum HTML extra para aparecer sobre ele (apenas uma pequena caixa de conteúdo).

Acho que descobri a dica de ferramenta usando jQuery, mas não tenho certeza de como mudar a imagem e Adicione uma pequena caixa de conteúdo sobre ela.

Agradecemos antecipadamente a todos.

Answer 1

Considere este trecho:

$("#someLinkID").click(function() {
    $("#someImageID").attr("src","newimage.jpg");
    $("#someContentDiv").show();
});

A sintaxe pode estar desligada, eu não usei o jQuery há alguns meses, mas você entendeu. Basicamente, você anexa um manipulador de clique no link e, quando o manipulador é disparado, você pode alterar dinamicamente o atributo SRC da tag de imagem para qualquer imagem que desejar e, ao mesmo tempo, pode mostrar uma div que você posicionou sobre A imagem antes do tempo com sua visibilidade definida como oculta.

Answer 2

Tabtastic é uma implementação boa, acessível e graciosamente degradante disso.

Answer 3

Parece -me que você pode querer um controle deslizante de conteúdo ... confira esta lista de 25 diferentes.