BackGround

Kuhlmann · Dezembro 20, 2007

Olá amigos do Forum, gostaria de saber se vocês sabem algum script pronto ou meio caminho andando, que chame em outro arquivo um background mediante ao ID ou VAR?? Não tenho nem nossão com faz isso. Acho que deve ser mediante ao um onclick que faz uma ação.

Porém, sendo assim, o script tem que fazer chamar na tabela um background mediante a cada link, ou seja quando clicar em cada link ao atualizar a pagina chamara na tabela um background diferente...

alguém sabe alguma coisa parecida??

At.

Henrique Kuhlmann

Renato Penna · Dezembro 20, 2007

Deixa eu ver se eu entendi. A cada clique no link deve mudar o fundo (background) da página ?

Kuhlmann · Dezembro 20, 2007

Sim:

Exemplo site "www.submarino.com.br"

Quando você clica em cada categoria, ao atualizar a pagina para a busca certa, a barra do topo muda a cor....

Tem como fazer isso...??

Um amigo meu passou um javascript em outro forum, porém táh dando erro...

Tipo quando eu clico muda a cor e não vai para o link certo, porém quando clico para abrir outra aba no explorer ele vai para o link porém não muda a cor da barra...

Codigo em baixo...

<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">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>

fercosmig · Dezembro 20, 2007

deixe as imagens pre definidas na página por exemplo dentro de um case

e sorteie um numero cada vez que a página carregar

http://www.w3schools.com/jsref/jsref_random.asp

Kuhlmann · Dezembro 20, 2007

o problema é que eu não quero que sorteie, quero que cada link tema cor pre-definida, sendo cada categoria com usa cor..

At..

HENRIQUE KUHLMANN

o problema é que eu não quero que sorteie, quero que cada link tenha uma cor pre-definida, sendo cada categoria com sua cor..

At..

HENRIQUE KUHLMANN

fercosmig · Dezembro 20, 2007

então é mais simples, quando chamar a função envia como parametro o nome da imagem ou a cor

Kuhlmann · Dezembro 20, 2007

Olá Senhor Moderador...

Intão é simples mais não estou conseguindo fazer...

:S

Tenho esse codigooo

<table width="659" id="myTable" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<body id="bg" style="color:#ffffff">
<a href="java script://;"; onclick="document.getElementById('myTable').style.background='#000000';">Link01</a><br>
<a href="java script://;" onclick="document.getElementById('myTable').style.background='#cccccc';">Link02</a><br>
<a href="java script://;" onclick="document.getElementById('myTable').style.background='#00ffff';">Link03</a><br>
<a href="java script://;" onclick="document.getElementById('myTable').style.background='#00ff00';">Link04</a><br>
<a href="java script://;" onclick="document.getElementById('myTable').style.background='#ffff00';">Link05</a><br>
<a href="java script://;" onclick="document.getElementById('myTable').style.background='#ff000f';">Link06</a></p> 
</body>

Dáh um exemplo nele como eu posso deixa para mudar a cor depois q entrar no link. Tenho esse outro aki também mais táh dando erro não sei porque? Quando eu clico muda a cor, porem quando coloco bara abrir em outra aba ele abre o link porém não muda a cor....

<html>
<head>
<title>Change BackGround with JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;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">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>

Que eu faço???????????????????????????????????

Sou muito hauly ainda...

Editado Dezembro 21, 2007 por fercosmig
Utilize as tags de código.

KaKarotto · Dezembro 21, 2007

Oi kuhlmann. Seguinte cara, a coisa não é tão simples quanto parece, principalmente pra você que está engatinhando ainda. O que o submarino faz é criar estilos diferentes para cada link, e faz a troca com Javascript e Css, mudando parte do layout. Na verdade é simples de fazer, mas não tão simples pra quem ainda está começando.

Lá o site é feito com linguagem dinamica, com asp, aspx, python ou php. Não vem ao caso a linguagem feita. De qualquer forma, o site é feito com includes. Ou seja eles incluem uma página no meio do documento, sendo que apenas uma parte do site é mudado. Dessa forma é fácil mudar o estilo apenas incluindo o conteúdo com o estilo diferente.

Da forma que quer fazer é mais dificil, pois está trabalhando apenas com html e javascript. Nesse caso, você teria de colocar em todas as suas páginas o seguinte:

<html>
<head>
<title>Página 1</title>
<script>
window.onload=function(){
document.body.bgColor="#336699"
document.getElementById('menu').style.backgroundColor="#336699"
}
</script>

</head>
<body>

<div id="menu">
</div>
<!--Conteúdo-->

</body>
</html>

você percebe a dificuldade? você teria que montar vários htmls, muito parecidos com apenas algumas mudanças no conteúdo e ainda incluir em todas as páginas o script que citei para fazer as alterações de cores.

Existe um site excelente para pessoas no seu perfil:

http://www.criarweb.com/manuais/paginas_dinamicas/

Nesse site tem tudo o que você deseja saber para construir sites e muitas técnicas que precisará usar.

O site é grande, tem muito conteúdo, se você precisa resolver o seu problema pra agora, então o conselho que dou é...Aprenda a ler rápido.

você consegue. Kelabrassssssss

Kuhlmann · Dezembro 21, 2007

Intão eu sei a dificuldade desse procedimento por se tratar de uma pagina dinamica. Porem para você entender eu não tenho tipo varias paginas htmls.

Tipo assim o sistema q utilizo me da acesso para ter

1° Barra Topo

1° Barra Esquerda

1° Rodape

Sendo assim a busca dos produtos seria mediante SQL.

Então quer dizer....

Eu não tenho cada pagina mediante a busca que o cliente quer. Tipo o cliente busca o produto ai a programação do sistema q ultizo vai buscare direto do banco de dados.

o sistema é o www.rumo.com.br

No estanto consegui desenver um sistema parecido com o que eu quero, porém como meu conhecimento não é muito vasto nessa área preciso dessa ajuda.

O esquema q estou utilizando é quando o cliente clica na categoria (EX: carro) chama uma barra referente a essa categoria, se clica na categoria (Roda) chama a barra referente a roda, sendo que todas essa barras estão ocultas no HTM BarraEsquerda. Intão queria fazer o mesmo com a barraTopo, como te falei. Sem assim consego chama cada cor para a barra topo utilizando o mesmo script, porém no script não consego delimitar que a cor váh átras das informações que eu quero...

Exemplo, Eu o chamo ( ai adiciona uma tabela a mais.) Assim zuando tudooooo

Não sei se consegui ser muito claro. E tipo nesse sistema q utilizo não tenho acesso ao ASP.

Osssooooooooooo

Murillo C. · Dezembro 21, 2007

uhmmm

um bom tópico.

também to querendo saber algo parecido.

valeu amigos do forum Script Brasil.

Kuhlmann · Dezembro 21, 2007

<style>
a{
    color:#2400FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
}
a:hover{color:#2400FF;}
</style>

<body>
<table width="800" border="0" cellpadding="0" cellspacing="0">
  
  
  <style type="text/css">
.ddmFont {
    font-family: Helvetica, sans-serif, Arial;
    font-size: 13;
    color: #000000;
    text-decoration: none;
}
.ddmTable {

    border: 1px solid #000000;
}

.ddmFont2{
    font-family: Helvetica, sans-serif, Arial;
    font-size: 13;
    color: #cc0000;
    text-decoration: none;
}
.ddmTable {

</style>


&lt;script type="text/javascript">

function goThere()
{
self.location=document.getElementById("selectLE").options[document.getElementById("selectLE").selectedIndex].value;
document.cookie="menusCur="+document.getElementById("selectLE").options[document.getElementById("selectLE").selectedIndex].name
}


function findChar(descritor) 
{
  var ini=0;
  var fim=descritor.length; 

  while(document.cookie.substring(ini,fim))
  {
    var caracter;
    var nome=document.cookie.substring(ini,fim);
    if(nome==descritor)
      caracter=document.cookie.charAt(fim+1);
    ini++;
    fim++;
  }
  return caracter;
}


function ddmItem(elem, bgcolor, URL, itemText, textClass, subTrigger)
{
var ELEM=elem;
var texto="";
texto+="<table bgcolor=";
texto+="#";
texto+=bgcolor;
texto+=" width='165' cellpadding=0 cellspacing=0 border=0";
texto+=" onMouseOver=";
texto+='"';
texto+="java script:document.getElementById('";
texto+=elem+"Quad";
texto+="').src='<baseloja>images/quad_on.gif'";
texto+='"';
texto+=" onMouseOut=";
texto+='"';
texto+="java script:document.getElementById('";
texto+=elem+"Quad";
texto+="').src='<baseloja>images/quad_off.gif'";
texto+='"';
texto+=">";
texto+="<tr><td width=90% align='left'><font class='"+textClass+"' ><img src='<baseloja>images/quad_off.gif' align=left id=";
texto+=elem+"Quad";
texto+=">";
texto+="<a href=";
texto+='"';
texto+="ListaProdutos.asp?IDLoja=<IDLoja>"+URL;
texto+='"';
texto+=" class=ddmFont>";
texto+=itemText;
texto+="</a></font></td><td>";
if(subTrigger=="TRUE")
texto+="<img src='<BaseLoja>images/tri.gif'>";
texto+="</td></tr></table>";

if(document.getElementById(elem))
document.getElementById(elem).innerHTML=texto;
}



if(!findChar("menusCur"))
document.cookie="menusCur=0";


var homeURL="http://www.rumo.com.br/sistema/home";
var homeURLen=homeURL.length;
var listaURL="http://www.rumo.com.br/sistema/ListaProdutos";
var listaURLen=listaURL.length;
var customURL="http://www.rumo.com.br/sistema/custom.asp";
var customURLLen=customURL.length;

if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='1'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='2'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='3'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='4'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='5'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='6'))
document.cookie="menusCur=0";
if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='7'))

if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='8'))

if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='9'))

if((document.location.href.substring(0,listaURLen)!=listaURL)&&(findChar('menusCur')!='b'))

</script>



<table width="239" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
  <tr> 
    <td width="239" height="23" background="../../%3Cbaseloja%3Eimages/verde_01.jpg"><div align="center" id="fraldasLabel" bgcolo=#"FFFFCC" onClick="java script:document.cookie='menusCur=1'"><a href=http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&Y=&cch=&IDCategoria=57737><strong><font color="#000000" size="2">Fraldas</font></strong></a></div></td>
  </tr>
</table>

<table cellpadding="1" cellspacing="1">
  <tr><td></td></tr></table>

<!------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------->
<p>
  <style type="text/css">
.ddmFont {
 font-family: Helvetica, sans-serif, Arial;
 font-size: 12px;
 color: #000000;
 text-decoration: none;
}
.ddmTable {

}

.beTable {
 border: 1px solid #FFFFFF;
}

</style>
  &lt;script type="text/javascript">

var menusCurr=findChar("menusCur");

function beItem(bgcolor, URL, itemText)
{
var texto="";
texto+="<table border='0' cellspacing='0' cellpadding='0' align='top' width='100%'";
texto+=" bgcolor='#"+bgcolor+"'";
texto+=" class='beTable'>";
texto+="<tr><td>";
texto+="<a href='"+URL+"'>";
texto+="<font class='ddmFont'>   ";
texto+=itemText;
texto+="</a>";
texto+="</td></tr></table>";
return texto;
}


function mostraTB()
{
if(document.getElementById("enquete").options[document.getElementById("enquete").selectedIndex].value=="outro")
{
window.alert("!");
document.getElementById('enqueteOutro').disabled='';
}
}
</script>


<table><tr><td>

&lt;script type="text/javascript">

var textofraldas="<table border=0 cellspacing=0 cellpadding=0 width=776 height=100><tr><td  bgcolor='#FFFFFF' align='left'><background='../lojas/00004175/images/fraldas_bes.gif'>";
textofraldas+="<background='../lojas/00004175/images/fraldas_bes.gif'>";
textofraldas+="</tr></td></table></table>";


if(menusCurr=='1')document.write(textofraldas);

</script>

</td></tr></table>

</table>

Editado Dezembro 21, 2007 por fercosmig
Utilize as tags de código.

Kuhlmann · Dezembro 21, 2007

Ae pessoal tenho esse codigo JAVASCRIPT que é utilizado para quando o kara clica-se no link entraria em uma pagina e assim depois mudaria a imagem de fundo de uma certa tabela....

Porém está ocorrendo um erro. Quando se clica só muda a imagem e não vai para o link..

Não estou intendendo..>

Era para quando clicar ir para uma pagina e aparecer a imagem correta...>

O que vocês achão..??

<html>
<head>
<title>Change BackGround with JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;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">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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>

Valeu Pessoal...

Editado Dezembro 21, 2007 por fercosmig
Utilize as tags de código.

KaKarotto · Dezembro 21, 2007

Retira o return false do onclick, e coloca o endereço da página no href.....

Kuhlmann · Dezembro 21, 2007

Não chama a imagem se tira-lo...

Ossoooo só vai para o linnkkk

<html>
<head>
<title>Change BackGround with JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;script>
    function changeBackGround(img) {
        document.getElementById('myTable').style.backgroundImage="url('"+ img +"')";
    }
</script>
</head>
<body>
<table width="500" height="93" border="0" align="center" cellpadding="5" cellspacing="5" id="myTable" background="default.jpg">
  <tr>
    <td height="30">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<p><a href="http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&Y=4493946908230&cch=&IDCategoria=57737" [b]onload="changeBackGround(<baseloja>images/imagem01.jpg)"[/b]; return false;">Imagem 01</a> | <a href="http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&Y=4493946908230&cch=&IDCategoria=57732" onClick="changeBackGround('<baseloja>images/imagem02.jpg'); return false;">Imagem 02</a> | <a href="http://www.rumo.com.br/sistema/ListaProdutos.asp?IDLoja=4175&Y=4493946908230&cch=&IDCategoria=54562" onClick="changeBackGround('<baseloja>images/imagem03.jpg'); return false;">Imagem 03</a></p>
</body>
</html>

Coloquei assim também é não funfaaaaa

Editado Dezembro 21, 2007 por fercosmig
Utilize as tags de código.

Dezembro 31, 2007

substitui o href ¨asdf¨ /*pelo endereco da pagina a ser atualizado e posteriormente alterado pela novo background*/

abracos

Entrar

BackGround

Pergunta

Link para o comentário

Compartilhar em outros sites

14 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest djhacktecno

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns