IntroductionIn Neste artigo eu mostrar-lhe como escrever código para uma galeria de imagens. Uma galeria de imagem é apenas uma coleção de imagens. Normalmente, essas imagens são pequenos. Quando você clica em um você vê uma forma ampliada de it.You precisa conhecimentos básicos de HTML, CSS, JavaScript e DOM para entender este artigo. Nota: Se você não pode ver o código ou se você acha que alguma coisa está faltando neste artigo (link quebrado, imagem ausente), apenas contacte-me em [email protected].
Ou seja, contacte-me para o menor problema que você tem sobre o que você é CSS reading.Some e JavaScript PrinciplesOne imagem pode ser exibida na mesma página web por mais de um Tag da imagem. O que importa para exibir uma imagem em particular é o valor (URL) do atributo de origem. Você pode usar JavaScript (e DOM) para mudar este valor para uma marca de imagem. Uma tag de imagem pode ter muitos atributos e valores. Se você alterar apenas o valor, do atributo de origem da marca de imagem, a imagem da marca está exibindo vai mudar.
No entanto, a nova imagem terá as mesmas propriedades CSS (tamanho, por exemplo) como o image.ExampleThere anterior são projetos diferentes para uma galeria de imagens. Vou usar um exemplo simples aqui. Depois disso, você pode modificar o código para se adequar ao seu projeto comercial. Neste exemplo, existem cinco pequenas imagens em uma página web. Quando você clica em uma imagem pequena, sua forma alargada aparece mais acima na página. As cinco imagens estão em uma fileira.
LayoutWhenever os elementos de sua página web estão na forma de uma grade, linha ou coluna, você pode usar o elemento da tabela HTML. Portanto, para este exemplo, você precisa de duas tabelas. O primeiro mais acima na página da web tem uma linha e três células. A primeira célula pode ter algum texto. A segunda célula tem a imagem ampliada, e a terceira célula pode ter algum texto. A segunda tabela tem uma linha, mas com cinco células para os cinco pequenas imagens. Todas as imagens pequenas são do mesmo tamanho. Existe apenas uma imagem grande, é que a imagem ampliada.
Este é o código HTML para os elementos da tabela: Algum texto pode ir texto here.Some pode ir here.src = "img2.jpg" onclick = "ampliar (evento)"