(Resolvido) Alterar imagem em uma tabela

[andreftx]

Boa tarde,

Fiz uma busca, encontrei algumas soluções mas nenhuma se aplicava a minha necessidade, então gostaria de saber se alguém pode me ajudar com o seguinte.

Estou elaborando um site, e na tela principal tenho um topo com uma imagem de cabeçalho. Gostaria de que essa imagem trocasse aleatoriamente a cada acesso, serão três imagens.

Achei algumas opções mas que utilizavam OnLoad no < body >, para fundos com cor (utilizando styles) ou imagens que eram definidas como background.

Fico no aguardo!!

Valeu!!

Boa tarde novamente, achei uma solução para o meu problema e gostaria de compartilhar e já adicionar mais uma dúvida:

Criei 3 classes:

.topo1 { background-image:url(topo/topo1a.gif);}
.topo2 { background-image:url(topo/topo2a.gif);}
.topo3 { background-image:url(topo/topo3a.gif);}

e uma função

function mudaFundo(){
  var topos = ['topo1','topo2','topo3'];
  document.getElementById('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))];
}

na minha tabela nomeei da seguinte forma:

td class="topo1" id="corpo"

Assim, cada vez que dou um refresh na tela, ele muda o background daquela célula!!! o/

Agora minha outra dúvida:

Vamos supor que entrei na página e ele aleatoriamente escolheu o topo1a.gif

Quero exibir em uma célula uma imagem, mas com a condição de que o topo seja topo1a.gif

Não sei se minha linha de raciocínio está certa mas pensei em fazer assim: na célula que quero colocar esta nova imagem de fundo criar um IF, mas não estou acertando os parâmetros, alguém pode me ajudar?

Obrigado...

Editado Maio 29, 2008 por andreftx

[KaKarotto]

E aí André O/

Há um enorme contra-senso no seu post:

  Citar

Agora minha outra dúvida:

Vamos supor que entrei na página e ele aleatoriamente escolheu o topo1a.gif

Quero exibir em uma célula uma imagem, mas com a condição de que o topo seja topo1a.gif

Oras, se ele escolheu a classe topo1, e vai colocar apenas nessa classe outra imagem, basta botar a imagem logo de cara:

.topo1 { background-image:url(topo/suaImagem.gif);}

Ué...um elemento só pode ter uma imagem de fundo, se quer botar uma imagem X só na classe topo1, basta colocar na classe...:huh:

Não sei, talvez não tenha entendido direito o que você quer, então, o if que gostaria de colocar seria aqui:

function mudaFundo(){
  var topos = ['topo1','topo2','topo3']
  document.getElementById('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))]
  if(document.getElementById('corpo').className=="topo1"){
  // Faça aqui as alterações!!!! 
  }
}

Ok?

Bom, por hj chega....To batendo o cartão. rsrss

Akelabrassssssss

[andreftx]

Fala kakarotto

valeu pela resposta, acho que me expressei errado... olha só

Suponhamos que minha página tenha 3 células.

Na célula de cima, será atribuido um dos 3 fundos que defini nas classes ok? Que foi o que eu fiz.

Nas células de baixo, eu quero que a imagem de background, seja atribuida conforme a de cima.

Por exemplo, se na primeira célula for atribuido o topo1.gif, quero que embaixo seja atribuido algo como topo1a.gif em uma célula e topo 1b.gif na outra, se em cima for topo2.gif, embaixo tem que ser definido como topo2a.gif e topo2b.gif...

Meio confuso? hehehehe

Se puder me auxiliar...

Valeu pela ajuda!

Pensei em algo do tipo

<td class=if(document.getElementById('corpo').className=="topo1"){
class=topo1a>

é possível?

E então... ninguém? :P

Para tentar explicar melhor

eu to tentando achar uma solução que usasse algo parecido com asp

por exemplo

<td <% if bla bla bla bla bla response.write('class="topo1a"');%>

não tem algo parecido para fazer isso via javascript?

preencher um campo da tag html usando o script?

To insistindo no assunto porque é bem urgente... hehehe

valeus!

[fercosmig]

veja se ajuda

você pode usar a ideia do Kakarotto, se a dependendo da classe da 1ª celula você coloca a classe nas outras

var contador = 0;
if (contador == 1)
    classe = 'um';
else
    classe = 'dois';

document.write('<table class="tab">');
document.write('<tr>');
document.write('<td class="' + classe + '">&nbsp;</td>');
document.write('<td class="' + classe + '">&nbsp;</td>');
document.write('</tr>');
document.write('</table>');

[andreftx]

Fala fercosmig, td beleza?

Valeu pela ajuda... mas ainda to na peleja

hehehehe

O código ficou assim:

<html>
<head>
<style>
.topo1 { background-image:url(topo01.jpg);}
.topo2 { background-image:url(topo02.jpg);}
.topo1a { background-image:url(topo01a.jpg);}
.topo2a { background-image:url(topo02a.jpg);}
</style>

<script>
function mudaFundo(){
  var topos = ['topo1','topo2','topo3'];
  document.getElementById('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))];
}

[b]// nesse aqui ele está escolhendo o fundo que será definido no OnLoad[/b]


function Fundo1(){
     if(document.getElementById('corpo').className=="topo1"){
     document.write('<td class="topo1a">&nbsp;</td>');
     }
     if(document.getElementById('corpo').className=="topo2"){
     document.write('<td class="topo2a">&nbsp;</td>');
     }
}

[b]// essa função faz a comparação de qual classe foi usada na célula de cima para saber qual classe vai usar na célula embaixo.[/b]

</script>
</head>

<body onload="mudaFundo();">

<table width="799" height="200">
<tr>
<td  id="corpo" class="topo1"> teste
</td>
</tr>
<tr>
[b]<td>  </td> // nessa célula que quero aplicar a classe dependendo do escolhido na célula anterior[/b]
</tr> 
</tr>
</table>
</body>
</html>

E então, como chamo a segunda função nesta célula?

Editado Maio 28, 2008 por fercosmig
Adicionar tag CODE

[KaKarotto]

Há inúmeras maneiras de se fazer isso...

Seguindo o seu raciocínio:

<style>
.topo1 { background-image:url(topo01.jpg); background-color:red;}
.topo2 { background-image:url(topo02.jpg); background-color:blue;}
.topo3 { background-color:green;}

.topo1a { background-image:url(topo01a.jpg);background-color:darkred;}
.topo2a { background-image:url(topo02a.jpg);background-color:darkblue;}
.topo3a { background-image:url(topo02a.jpg);background-color:darkgreen;}

</style>

window.onload=function(){
var $=function(id){return document.getElementById(id)}

var topos = ['topo1','topo2','topo3']
$('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))]
$('td-fundo').className=$('corpo').className+"a"
}

<table width="799" height="200" border="1">
    <tr>
        <td id="corpo">teste</td>
    </tr>
    <tr>
        <td id="td-fundo"></td> <!-- nessa célula que quero aplicar a classe dependendo do escolhido na célula anterior -->
    </tr>
</table>

Essa é uma forma. Seja lá que forma use, deve referenciar o elemento que deseja mudar pelo id.

Outra coisa, usar javascript fora do html é melhor, coisa como <body onload=""> não é legal.

Abraço

[fercosmig]

testa este exemplo ae, só modifica as imagens

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<script language="javascript" type="text/javascript">
<!--
function mudaFundo(){
  var topos = ['topo1','topo2','topo3'];
  var topo = topos[Math.floor(Math.random( ) * (topos.length))];
  document.getElementById('corpo').className  = topo;
  Fundo1(topo);
}
function Fundo1(topo){
    switch(topo){
        case 'topo1':
            document.getElementById('corpo1').className = 'topo1a';
            break;
        case 'topo2':
            document.getElementById('corpo1').className = 'topo2a';
            break;
        case 'topo3':
            document.getElementById('corpo1').className = 'topo3a';
            break;
    }
}
-->
</script>
<style type="text/css" media="screen">
<!--
.topo1 {background-image:URL(banner1.jpg);}
.topo2 {background-image:URL(banner2.jpg);}
.topo3 {background-image:URL(banner3.jpg);}
.topo1a {background-image:URL(banner4.jpg);}
.topo2a {background-image:URL(banner5.jpg);}
.topo3a {background-image:URL(banner6.jpg);}
-->
</style>
</head>
<body onLoad="java script:mudaFundo();">
<table width="799" height="200" border="2">
<tr><td id="corpo">teste</td></tr>
<tr><td id="corpo1">testa</td></tr>
</table>
</body>
</html>

[andreftx]

fercosmig e KaKarotto

muito obrigado!

Testei aqui e deu certo nos dois casos.... valeu mesmo!

Abraço

[andreftx]

Kakarotto, mals pela MP...mesmo assim valeu!!

Vamos lá...

Estou usando no meu código esta maneira:

window.onload=function(){
var $=function(id){return document.getElementById(id)}

var topos = ['topo1','topo2','topo3']
$('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))]
$('latesq').className=$('corpo').className+"a"
$('latdir').className=$('corpo').className+"b"
}

mas no mesmo código, tem duas funções no <body onload> uma que o fireworks criou (botões do menu) e uma outra de um slideshow que tem na mesma página as duas são carregadas no body onload

<body onLoad="MM_preloadImages('images/001.gif','images/002.gif'), runSlideShow();">

Sendo assim, aquela função window.onload não executa

apaguei todo o código da animação dos botões e do slideshow

e ela funcionou normalmente

alguém pode me ajudar com o motivo?

Agradeço desde já

Valeu!!

abraços!!!

[KaKarotto]

André, como eu disse, não tem como eu testar os códigos agora.

Vai no chutômetro bele? Até a hora de eu voltar.

Você tem 2 opções, eu te darei a melhor. Bota um nome nessa função nossa que faz a mudança de fundos. Assim:

function mudaFundo(){
var $=function(id){return document.getElementById(id)}

var topos = ['topo1','topo2','topo3']
$('corpo').className = topos[Math.floor(Math.random( ) * (topos.length))]
$('latesq').className=$('corpo').className+"a"
$('latdir').className=$('corpo').className+"b"
}

Agora acrescente na lista de funções que devem ser executadas no carregar do documento:

<body onLoad="MM_preloadImages('images/001.gif','images/002.gif'), runSlideShow(), mudaFundo()">

Vê se funciona..eu nunca fiz isso.

Aquele abraço.

[andreftx]

Bingo!! hahahaha

deu certo

Valeu kakarotto

abraço