Jump to content
Fórum Script Brasil
  • 0

BackGround


Kuhlmann

Question

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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>

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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...

Edited by fercosmig
Utilize as tags de código.
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
<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>

Edited by fercosmig
Utilize as tags de código.
Link to comment
Share on other sites

  • 0

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...

Edited by fercosmig
Utilize as tags de código.
Link to comment
Share on other sites

  • 0

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

Edited by fercosmig
Utilize as tags de código.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...