Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Alterar imagem em uma tabela

andreftx

Perguntado por andreftx,

 Share

Pergunta

andreftx

andreftx

Postado
Postado (editado)

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 por andreftx
Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
KaKarotto

KaKarotto

Postado
Postado

E aí André O/

Há um enorme contra-senso no seu post:

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

Link para o comentário
Compartilhar em outros sites
  • 0
andreftx

andreftx

Postado
  • Autor
Postado

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!

Link para o comentário
Compartilhar em outros sites
  • 0
fercosmig

fercosmig

Postado
Postado

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>');

Link para o comentário
Compartilhar em outros sites
  • 0
andreftx

andreftx

Postado
  • Autor
Postado (editado)

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 por fercosmig
Adicionar tag CODE
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites
  • 0
fercosmig

fercosmig

Postado
Postado

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>

Link para o comentário
Compartilhar em outros sites
  • 0
andreftx

andreftx

Postado
  • Autor
Postado

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

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...