Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 8
Tutorial para Alterar a Imagem de Fundo da Tela

Alterar uma imagem de fundo usando jQuery é uma tarefa fácil. Podemos usar o método css() e a notação da função url() para alterar a imagem de fundo.
A sintaxe para alterar a imagem de fundo usando jQuery é dada a seguir:
$("seletor").css({"background-image": "url(imagem)"});

Podemos passar a imagem diretamente para a função url() conforme indicado acima, ou pode ser feito armazenando a imagem em uma variável e passando o nome da variável para a url conforme indicado abaixo.
var img = "imagem";
$("seletor").css({"background-image": "url(" + img + ")"});
Onde:
speed: É um parâmetro opcional. Especifica a velocidade do atraso. Seus possíveis valores são lento, rápido e milissegundos.
easing: Especifica a função easing a ser utilizada para a transição.
callback: Também é um parâmetro opcional. Ele especifica a função a ser chamada após a conclusão do efeito fadein().
Vejamos um exemplo:
Neste exemplo, há um elemento div com sua imagem de fundo. Estamos usando o método css() e a notação de função url() para alterar a imagem de fundo do elemento div correspondente.
<!DOCTYPE html> <html> <head> <style> #d1 { border: 3px solid red; background-image: url("esfinge.jpg"); height: 300px; width: 350px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function() { $("#d1").css({"background-image": "url(fuji.jpg)"}); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <center> <h4>Este é um exemplo de alteração da imagem de fundo usando jQuery.</h4> <div id = "d1"> </div> <p>Clique no botão a seguir para alterar a imagem de fundo da div acima.</p> <button>Clique me</button> </center> </body> </html>
Resultado:
Veja nas imagens os possíveis resultados desse código:

<< Tutorial para Saber como Utilizar os Eventos fadeIn() e fadeOut()
Tutorial para Saber como Utilizar os Eventos keypress() e keyup() >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino