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