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

Altere o botão de imagem

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

Alterar a imagem

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.