1
resposta

[Dúvida] Como adicionar um link a uma imagem criada dinamicamente

Olá amigos, estou criando o site para minha barbearia como portfólio. Adicionei seis imagens dinamicamente através do JavaScript, porém não consigo adicionar links a essas imagens. Quero que ao clicar em cada imagem o usuário seja direcionado para uma pagina do instagram. Lá vai o código:

const frame = []; //array da moldura
const foto = []; //array das fotos
let local = document.getElementById("local"); //local da inserção das fotos
let x = 423; //valor do x da linha inferior
let x2 = 650; //valor do x da linha superior

window.onload=function() { //funciona simultaneo ao carregamento da pgn
    for (let c = 1; c <= 6; c++) {

        frame[c] = document.createElement("img");
        frame[c].src = ("Imagens/frame.png");
        local.appendChild(frame[c])
        frame[c].classList.add("moldura")

        foto[c] = document.createElement("img"); //cria um elemento imagem em cada posicao da array
        foto[c].src = (`Imagens/foto${c}.png`); //define o link da foto a ser adicionada
        local.appendChild(foto[c]) //adiciona a imagem ao local
        foto[c].classList.add("foto"); //adiciona o atributo class as imagens

        if (c <= 4) {
            frame[c].style.top = "1910px"; //define o y da imagem
            frame[c].style.left = `${x - 17}px`; //define o x da imagem

            foto[c].style.top = "1927px";
            foto[c].style.left = `${x}px`;
            x = x + 230; //distancia entre as imagens

        }
        else {
            frame[c].style.top = "1610px";
            frame[c].style.left = `${x2 - 17}px`;

            foto[c].style.top = "1627px";
            foto[c].style.left = `${x2}px`;
            x2 = x2 + 230;
        }
    }
}
1 resposta

Oi, Gabriel, tudo bem?

Desculpe a demora em te responder!

Para adicionar links às imagens dinamicamente através do JavaScript, você pode utilizar a propriedade addEventListener ao final da estrutura condicional, para capturar o evento de clique em cada imagem e redirecionar o usuário para a página do Instagram. Ficaria assim:

const frame = []; // array da moldura
const foto = []; // array das fotos
let local = document.getElementById("local"); // local da inserção das fotos
let x = 423; // valor do x da linha inferior
let x2 = 650; // valor do x da linha superior

window.onload = function() { // funciona simultaneamente ao carregamento da página
    for (let c = 1; c <= 6; c++) {
        frame[c] = document.createElement("img");
        frame[c].src = "Imagens/frame.png";
        local.appendChild(frame[c]);
        frame[c].classList.add("moldura");

        foto[c] = document.createElement("img");
        foto[c].src = `Imagens/foto${c}.png`;
        local.appendChild(foto[c]);
        foto[c].classList.add("foto");

        if (c <= 4) {
            frame[c].style.top = "1910px";
            frame[c].style.left = `${x - 17}px`;

            foto[c].style.top = "1927px";
            foto[c].style.left = `${x}px`;
            x = x + 230;
        } else {
            frame[c].style.top = "1610px";
            frame[c].style.left = `${x2 - 17}px`;

            foto[c].style.top = "1627px";
            foto[c].style.left = `${x2}px`;
            x2 = x2 + 230;
        }

        // Adiciona o link para o Instagram
        foto[c].addEventListener("click", function() {
            window.location.href = "https://www.instagram.com/seu_perfil/";
        });
    }
}

Quando o usuário clicar em uma imagem, a função anônima será executada e redirecionará o navegador para a página do Instagram. Lembre-se de substituir "seu_perfil" pelo nome de usuário correto do seu perfil do Instagram.

Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo do projeto, outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!