Alterar imagem de fundo ao clicar no link

Kuhlmann · Dezembro 21, 2007

<html>
<head>
<title>Change BackGround with JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
	function changeBackGround(img) {
		document.getElementById('myTable').style.backgroundImage="url('"+ img +"')";
	}
</script>
</head>
<body>
<table width="500" height="200" border="0" align="center" cellpadding="5" cellspacing="5" id="myTable" background="default.jpg">
  <tr>
	<td height="30"> </td>
  </tr>
  <tr>
	<td> </td>
  </tr>
</table>
<p><a href="asdf" onClick="changeBackGround('imagem01.jpg'); return false;">Imagem 01</a> | <a href="asdf" onClick="changeBackGround('imagem02.jpg'); return false;">Imagem 02</a> | <a href="asdf" onClick="changeBackGround('imagem03.jpg'); return false;">Imagem 03</a></p>
</body>
</html>

Não intendi para táh dando erroooo....

DSerma · Dezembro 21, 2007

Legal..... você colocou o código... mas QUAL o erro ???

Abraços....

Kuhlmann · Dezembro 21, 2007

O erro é o seguinte...

Esse script serve para quando clicar no link depois q atualizar mudar a imagem background de uma certa tabela...

O eerro q esta acontecendo é que quando clica não vai para nenhum link e muda a o fundo...

Quero q atualize e mude o fundo...

Exemplo. Site submarino, que quando você clica em uma categoria chama-se na tabela topo cores referentes aquela categoria....

Efeito JAVA

Falow AMIGO

DSerma · Dezembro 21, 2007

Seu erro ta aki:

<a[b] href="asdf"[/b] onClick="changeBackGround('imagem01.jpg'); return false;">Imagem 01</a> | <a href="asdf" onClick="changeBackGround('imagem02.jpg'); return false;">

No href você define a página que será chamada no link.... se você não qr q o link chame alguma página, você coloca o "#", se você colocar qualquer outra coisa além disso... ele vai tentar buscar a página....

Se você qr q ele traga uma nova página, então você deve fazer:

<a [b]href="Pagina_a_ser_carregada.html"[/b] onClick="changeBackGround('imagem01.jpg'); return false;">Imagem 01</a> | <a href="asdf" onClick="changeBackGround('imagem02.jpg'); return false;">.

Ok ??

Espero ter ajudado..

Abraços...

Kuhlmann · Dezembro 21, 2007

Intão meu amigo, eu sei q tem q colocar o link ai. Mandei o codigo limpo..

mesmo eu colocando o link certo corre erro...

DSerma · Dezembro 21, 2007

Tira o "return false;" do link...

Isso faz com que a página não execute nenhuma outra coisa a não ser o JS...

Eu TESTEI o seu código aki na minha máquina.. e foi só colocar o caminho correto e TIRAR o return false; que funfou de boa..

Abraços...

E mais uma coisa....

Antes que você diga " Mas agora só o link funciona e a imagem não troca..." vou te explicar o pq...

Isso ocorre pq você está chamando a outra página pelo link na MESMA página que você qr trocar o background.....

Então quando você clica no link.. ele troca o fundo.. mas já chama a outra página tb...

Nesse caso, ou você trabalha com frames... ou usa Div e faz as requisições via Ajax...

Entendeu ??

Abraços.... http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

Kuhlmann · Dezembro 21, 2007

Intendi....

Sabe um codigo que possa utilizar para que ele quando clicar apareça ??

Pq quando eu tirro essa função q você falo. O link funciona normal, porém não chama a imagem..>

Tõ ficando lokooo

:(

DSerma · Dezembro 21, 2007

Intendi....

Sabe um codigo que possa utilizar para que ele quando clicar apareça ??

Pq quando eu tirro essa função q você falo. O link funciona normal, porém não chama a imagem..>

Tõ ficando lokooo

:(

Trabalhe com Iframes...

Veja o exemplo abaixo baseado no seu código:

<script>
function changeBackGround(img) {
document.getElementById('myTable').style.backgroundImage="url('"+ img +"')";
}
</script>
<table width="500" height="200" border="0" align="center" cellpadding="5" cellspacing="5" id="myTable" background="mm_spacer.gif">
<tr>
<td height="30"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<center>
<iframe id="hindex" src="" name = "hindex"></iframe>
<p><a href="geral.asp" target = "hindex" onClick="changeBackGround('mm_lodging_image.jpg');">Imagem 01</a> | <a href="Geral.asp" target = "hindex" onClick="changeBackGround('Rh.jpg'); ">Imagem 02</a> 
<center>

Abraços...

Kuhlmann · Dezembro 22, 2007

<script>
function changeBackGround(img) {document.getElementById('myTable').style.backgroundImage="url('"+ img +"')";
}
</script>
<table width="500" height="200" border="0" align="center" cellpadding="5" cellspacing="5" id="myTable" background="<baseloja>images/fundobusca.jpg">
<tr>
<td height="30"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<center>
<iframe id="hindex" src="" name = "hindex"></iframe>
<p><a href="http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&IDCategoria=57737" target = "hindex" onClick="changeBackGround('<baseloja>images/imagem02.jpg');">Imagem 01</a> | <a href="http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&IDCategoria=57737" target = "hindex" onClick="changeBackGround('<baseloja>images/imagem03.jpg'); ">Imagem 02</a>
<center>

Intão manu tentei com esse:

Olha o q aconteceu, tipo quando clico aparece a cor normal, porém aparece uma caixa em baixo, ai dentro dessa caixa vai para o link certooo...

Porém não muda a cor nesse link..>

Intendeu??

Tamos quase chegando láhh...

hehehehehehehehe

DSerma · Dezembro 22, 2007

Bom.. o código ta fazendo oq você pediu.. abrir o link e mudar o fundo da tabela....

Agora você qr mudar a cor do que ???

Do fundo da página principal ou o fundo da página que você está chamando ?

Se for da principal, coloque um "document.getElementByTagName("body").style.background = "#aki vai sua cor"...

Se for da página que se abre no iFrame.. ai no bgcolor de cada uma você define isso...

Se for outra cor que você qr mudar.. fala ae....

Abraços...

Kuhlmann · Dezembro 22, 2007

Intão velho pode ser um background ou um bgcolor...

Tipo axo q você não intendeu o q eu quero...

Tipo entra no site www.submarino.com.br

Láh no topo tem varias categorias.....

Cada categoria tem uma cor diferente da tabela quando você clica..

Entra láh para você ver..

Clica em umas 3 categorias, você vai ver q a cor de fundo da tabela ou o background muda de cor mediante a categira...

isso que eu querooo>>>

DSerma · Dezembro 22, 2007

Só uma coisa...

No site do Submarino, quando você clica em algum menu lá em cima... ele chama OUTRA PÁGINA, e não faz a requisição na mesma....

Ou seja.... quando você clica, ele carrega outra página com o memso menu ( provavelmente um include ), porém, muda apenas a cor do fundo via CSS...

Agora.. se você qr fazer que a cor do menu mude, porém sem carregar outra página.... ai faça assim:

<style>
.classe1
{
background: #CC0000;
}
.classe2
{
background: #0050A4;
}

</style>
<script>
function changeBackGround(classe) {
document.getElementById('menu').className=classe;
}
</script>
<center>
<div id = "menu">
Menu1 - Menu2 - Menu3
</div>
</center>
<center>
<iframe id="hindex" src="" name = "hindex" width = "500"></iframe>
<p><a href="geral.asp" target = "hindex" onClick="changeBackGround('classe1');">Imagem 01</a> | <a href="Geral.asp" target = "hindex" onClick="changeBackGround('classe2'); ">Imagem 02</a> </p>
<center>

Abraços....

Kuhlmann · Dezembro 26, 2007

Iae amigo... Como foi de natal??

Espero que bem..

Intão esse codigo ai não táh fazendo o que eu querooo.....

Vou fazer um exemplos ai e posto aki...

-------------------------

Post Mesclado

------------------------

manu axo q é mais simples q nos pensamos...

Tipo tem esse codigo ai de baixo...

Ele funciona quando clica e Jáh muda a cor....

Perante o ID...

Ok...

Sabe o que eu tava pensando, se tem como estitar esse codigo assim.

Tipo nos damos um ID para a tabela....Exemplo ID="ok"

Ai no fazemos para cada onclick de cada link um numero...

Link 01 Exemplo= 1° onclick=001

Link 02 Exemplo= 2° onclick=002

ih assim por diante...

Ai nos fazemos uma função que fale que o onclick 001 vai no lugar do ID "OK"

Assim quando clicar vai para o link certo e muda a cor....

Tem como isso...

Táh osso esse SCRIPT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mudar a cor do fundo de uma página web</title>
</head>
<body id="bg" style="color:#ffffff">
<b><font color="ff0fff">Clique na cor que você quer ver o fundo da página!!</font></b><br><br>
<a href="java script://mudarcordapag.html" onclick="document.getElementById('bg').style.background='#000000';">PRETA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#cccccc';">CINZA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#00ffff';">AZUL</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#00ff00';">VERDE</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#ffff00';">AMARELA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#ff000f';">VERMELHA</a><br>
</body>
</html>

SemQxo · Março 26, 2009

Cara!

Eu não sei quase nada de programação mas estou tentando montar um site pra mim e quando procurei como mudar o fundo da página achei este forum só que testei seus códigos e não deu certo. Aí tentei mudar alguma coisa e parece que deu certo. Vê aí.

Seu código:

<a href="java script://mudarcordapag.html" onclick="document.getElementById('bg').style.background='#000000';">PRETA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#cccccc';">CINZA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#00ffff';">AZUL</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#00ff00';">VERDE</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#ffff00';">AMARELA</a><br>
<a href="java script://;" onclick="document.getElementById('bg').style.background='#ff000f';">VERMELHA</a><br>

Alteração que eu fiz:

<a "java script" onclick="document.getElementById('bg').style.background='#000000';">PRETA</a><br>
<a "java script" onclick="document.getElementById('bg').style.background='#cccccc';">CINZA</a><br>
<a "java script" onclick="document.getElementById('bg').style.background='#00ffff';">AZUL</a><br>
<a "java script" onclick="document.getElementById('bg').style.background='#00ff00';">VERDE</a><br>
<a "java script" onclick="document.getElementById('bg').style.background='#ffff00';">AMARELA</a><br>
<a "java script" onclick="document.getElementById('bg').style.background='#ff000f';">VERMELHA</a><br>

Arquivado

Alterar imagem de fundo ao clicar no link

Recommended Posts

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kuhlmann 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

SemQxo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante