Como alterar a fonte da imagem JavaScript
JavaScript pode se integrar ao HTML para atender às demandas dos usuários. Por integração, os usuários podem empregar um recurso para alterar a fonte de imagem. Por exemplo, a propriedade SRC é utilizada para especificar a fonte de imagem. As fontes podem incluir um sistema de arquivos local, bem como o URL da imagem. Este guia serve para alterar o arquivo de origem da imagem, utilizando a propriedade SRC. Todos os navegadores mais recentes suportam a propriedade SRC para localizar a imagem de origem.
Esta postagem serve os seguintes resultados de aprendizado:
- Como alterar a fonte de imagem em JavaScript
- Exemplo 1: Alterar a fonte da imagem da imagem de arquivo local em JavaScript
- Exemplo 2: Alterar a fonte da imagem da imagem baseada na Web em JavaScript
Como alterar a fonte de imagem em JavaScript
JavaScript é essencial para alterar dinamicamente a exibição da imagem. Por exemplo, o img Elemento html fornece o src propriedade para modificar a fonte da imagem. A fonte da imagem pode ser um sistema local ou qualquer imagem de URL.
A sintaxe para aplicar a propriedade SRC usando JavaScript é fornecida abaixo:
Sintaxe
documento.getElementById ("MyImageId").src = "Newsource.png ";Parâmetro
A descrição dos parâmetros é a seguinte:
- MyImageId: especifica o ID da imagem.
- src: refere -se à fonte da imagem.
Exemplo 1: Alterar a fonte da imagem da imagem local
Um exemplo é adaptado para alterar a fonte de uma imagem através do arquivo local em JavaScript. O exemplo compreende arquivos de código HTML e JavaScript.
Código HTML
Exemplo para alterar a fonte de imagem em JavaScript
Neste código, o src o atributo é utilizado para buscar a imagem "computador.jpg““. Depois disso, um “Altere o botão de imagem”É adicionado ao arquivo html que aciona o alteraçõescr () método. O alteraçõescr () O método é escrito em um arquivo JavaScript.
Código JavaScript
função alteraçõescr ()documento.getElementById ("imgid").src = "Livros.jpg ";
Neste código, o alteraçõesrc () o método busca o elemento usando seu id “imgid”E define o valor do“src”Atributo desse elemento.
Saída
A saída mostra que depois de pressionar o “Altere o botão de imagem”O arquivo de origem da imagem é alterado e a nova imagem é exibida.
Exemplo 2: Alterar a fonte da imagem de uma imagem baseada na Web
Outro exemplo é empregado para alterar a fonte da imagem através do URL em JavaScript. O código completo é dividido em arquivos HTML e JavaScript.
Código HTML
Exemplo para alterar a fonte da imagem da web em JavaScript
A descrição do código está abaixo:
- Em primeiro lugar, o largura e altura da imagem é atribuída à imagem dentro Tag.
- Depois disso, o Url de uma imagem é fornecida pelo src Propriedade para exibir a imagem na janela do navegador.
Código JavaScript
função alteraçõescr ()documento.getElementById ("imgid").src = "https: // cdn.Pixabay.com/foto/2022/07/28/33/42/arco-íris-7350780__340.jpg ";
Neste código, o alteraçõescr () O método é usado para acionar um evento quando o usuário clica no botão para alterar a fonte da imagem.
Saída
A saída ilustra que quando um usuário clica no “Alterar a imagem”, A nova imagem é substituída pelo existente.
Conclusão
JavaScript fornece a src atribuir para alterar a fonte da imagem especificando o caminho do arquivo. Por exemplo, o getElementId () o método é utilizado para extrair o elemento HTML através id, e depois o SRC A propriedade mudará a imagem de origem. Após a extração, o novo arquivo de imagem de origem é atribuído. Aqui, você aprendeu a mudar a fonte de imagem em JavaScript. Para isso, demonstramos um conjunto de exemplos em vários cenários.