Mudar Imagem Do Topo E Página Do Iframe

olá pessoal...
to com o seguinte problema... tenho um site onde o conteudo é exibido em um iframe no meio da pagina, e no topo eu queria que aparecece uma imagem diferente pra cada seção que o usuario estiver acessando.

entao... existe alguma funcão pra quando eu clikar em um link no menu, ele mude a página dentro do iframe e ainda mude a imagem no topo???

agradeço quem puder me dar uma força
valew

Edição feita por: gUiTaR_mAn, 10/03/2006, 11:16.

Bom se clicar no link do menu com certeza ira mudar a parte do centro q é o iframe, então tem um geito em PHP, vc poderia utilizar aqueles banners rotativo...
é uma ideia...

Mais tambem tem um jeito em javascript, bom vê se é isso que vc quer:

Salve isso como logo.js e coloque isso na pagina em HTML
<script language=JavaScript src="logo.js"></SCRIPT>

function banner(imgSource,url,alt,chance) {
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {
with (this) document.write("<A HREF=" + url + "><IMG SRC='" + imgSource + "' WIDTH=LARGURA HEIGHT=ALTURA BORDER=1 ALT='" + alt + "'></A>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();

banners[0] = new banner("banner.gif",
"ENDEREÇO SE QUISER COLOCAR NA IMAGEM",
"MENSAGEM QUANDO COLOCAR O MOUSE EM CIMA DA IMG",
10);
banners[1] = new banner("banner2.gif",
"ENDEREÇO 2",
"MENSAGEM2",
10);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i++) {
sum_of_all_chances += banners[i].chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) * Math.random()) + 1;
for (i = 0; i < banners.length; i++) {
chance_limit += banners[i].chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" + banners[i].url + "><IMG SRC='" + banners[i].imgSource + "' WIDTH=468 HEIGHT=60 BORDER=1 ALT='" + banners[i].alt + "'></A>");
return banners[i];
break;
}
}
}

Se quiser acrescentar mais img é só colocar:

banners[3] = new banner("banner3.gif",
"ENDEREÇO 3",
"MENSAGEM3",
10);

E agora coloque isto onde ira aparecer as imagens...

<script language=JavaScript>
<!--
this_banner = randomBanner();
-->
</SCRIPT>

Bom acho q é só isso, se naum for posta ai blz?
T +

Edição feita por: dbl, 10/03/2006, 13:48.

cara... pelo que percebi este código que vc colocou aí é pra randomizar a imagem que deve aparecer.

bom, mas não é issu ki eu quero...
o que eu preciso é que... quando o camarada clique em Contato (por exemplo) no menu, entao apareca a página de contato no iframe central e mude a imagem do topo da pagina e apareca a imagem contato.gif,

depois clique em servicos, entao mude o iframe central para a pagina de serviços e mude a imagem para servicos.gif

entede??
é referente ao item que vai ser visualizado no iframe, deve aparecer uma imagem no topo.

aguardo alguma solução
valew

Me diz uma coisa...

Não é mais fácil vc fazer uma estrutura de include como por exemplo, um menu lateral em uma coluna de uma tabela e o conteúdo aparecer normalmente na outra coluna?

Pelo que eu entendi vc tem um conteudo em um IFRAME. Entao logicamente esse Iframe busca uma determinada página. E em cima do IFRAMe na pagina principal, vc tem um Topo, certo? Acho que fica impossivel se manipular isso com asp, pq vc não está fazendo o método Solicitação X Resposta, ou seja, postando a página principal novamente.

Se vc tivesse postando a página novamente, era fácil. Você passava um parametro qualquer no menu, para armazenar a seção do seu site, e onde estiver a imagem, vc monta a apresentação dela de forma dinamica, capturando o valor do parâmetro passado pelo menu assim:

imagem= request("img")

Select Case imagem
Case "home"
imagem=home.gif
Case "servico"
imagem=servico.gif
Case "contato"
imagem=contato.gif
End Select


E onde estiver a imagem vc coloca
<img src="seu_diretorio/"&imagem&"width=100 heigth=60>

Agora se você não faz uma nova requisição para a própria página, mudando somente o conteudo do IFRAME, então Só com DHTML manipulando cliques e camadas que contém as imagens, com GetElementById

Se não foi isso que eu entendi, da um toque

Edição feita por: Lengrat, 10/03/2006, 16:52.

é exatamente isto que eu preciso...
com certeza, seria bem mais fácil jogar um valor para uma querystring e com ele manipular qualquer pagina do iframe ou imagem, mas que não queria atualizar a pagina toda, queria que a unica coisa que atualizasse fosse a pagina do iframe mesmo, por issu estou buscando uma solução pra mostrar aquela imagem que vai no topo.

como vc citou o dhtml... vc teria algum exemplo pratico disto pra me ajudar?
aguardo uma resposta
flw

Vamos ao exemplo. Fiz aqui rapidinho algo meio intuitivo. Não cheguei a testar pq estou no trampo ainda.

Vamos lá
imagina que vc tenha 3 buttons e cada button irá chamar uma função para mudar o posicionamento das Divs que contem a respectivia imagem, manipulando a sua propriedade zIndex:

<Button onClick="img_home()">Home</Button>
<Button onClick="img_servico()">Home</Button>
<Button onClick="img_contato()">Home</Button>

Temos entao as Divs ...

<DIV ID="home"><img src="home.gif" width=460px height=250px/></DIV>
<DIV ID="servico"><img src="servico.gif" width=460px height=250px/></DIV>
<DIV ID="contato"><img src="contato.gif" width=460px height=250px/></DIV>

e os estilos de posicionamento de cada div:

#home {
position:absolute; width:460px; height:250px; top:15px; left:100px; z-index:2
}
#servico{
position:absolute; width:460px; height:250px; top:15px; left:100px; z-index:1
}
#contato {
position:absolute; width:460px; height:250px; top:15px; left:100px; z-index:0
}

Cria-se as funções para manipular as camadas:

var home = document.getElementById("home");
var servico = document.getElementById("servico");
var contato = document.getElementById("contato");

function img_home() {
home.style.zIndex=2;
servico.style.zIndex=1;
contato.style.zIndex=0;
}

function img_servico() {
servico.style.zIndex=2;
home.style.zIndex=1;
contato.style.zIndex=0;
}

function img_contato() {
contato.style.zIndex=2;
home.style.zIndex=1;
servico.style.zIndex=0;
}

É isso.
Testa ae e me fala qqer coisa.
Creio que funfará

[]s ae

Edição feita por: Lengrat, 10/03/2006, 20:18.

putz... trabalhera
testei aki cara..., mas fis alguma coisa errada eu achu... deu erro
meu code:

<!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>Untitled Document</title>
<style>
#home1 { 
position:absolute; width:460px; height:250px; top:100px; left:100px; z-index:2
}
#servico{ 
position:absolute; width:460px; height:250px; top:100px; left:100px; z-index:1
}
#contato { 
position:absolute; width:460px; height:250px; top:100px; left:100px; z-index:0
}
</style>

<script>

var home1 = document.getElementById("home1");
var servico = document.getElementById("servico");
var contato = document.getElementById("contato");

function img_home() {
home1.style.zIndex=2;
servico.style.zIndex=1;
contato.style.zIndex=0;
}

function img_servico() {
servico.style.zIndex=2;
home1.style.zIndex=1;
contato.style.zIndex=0;
}

function img_contato() {
contato.style.zIndex=2;
home1.style.zIndex=1;
servico.style.zIndex=0;
}
</script>


</head>

<body>

<Button onClick="img_home()">Home</Button>
<Button onClick="img_servico()">Serviço</Button>
<Button onClick="img_contato()">Contato</Button>

<DIV ID="home1"><img src="home.gif" width=460px height=250px/></DIV>
<DIV ID="servico"><img src="servico.gif" width=460px height=250px/></DIV>
<DIV ID="contato"><img src="contato.gif" width=460px height=250px/></DIV>

</body>
</html>

valew

hehehe. Já sei o que houve. Eu tb nem me toquei.
Não adianta muito colocar o script antes dos botoes e as divs.
Para ele capturar o ID, o script tem que vir depois. Pq no momento em que ele armazena os valores nas variaveis, simplesmente as divs ainda não foram criadas. Dai nao funfa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#principal { 
position:absolute; width:460px; height:100px; top:100px; left:100px; z-index:2
}
#servico{ 
position:absolute; width:460px; height:100px; top:100px; left:100px; z-index:1
}
#contato{ 
position:absolute; width:460px; height:100px; top:100px; left:100px; z-index:0
}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>

<Button onClick="principal()">Home</Button>
<Button onClick="servico()">Serviço</Button>
<Button onClick="contato()">Contato</Button>

<DIV ID="principal"><img src="home.gif" width=460px height=100px/></DIV>
<DIV ID="servico"><img src="servico.gif" width=460px height=100px/></DIV>
<DIV ID="contato"><img src="contato.gif" width=460px height=100px/></DIV>

<script language="javascript">

var vpage1 = document.getElementById("principal");
var vpage2 = document.getElementById("servico");
var vpage3= document.getElementById("contato");

function principal() {
	vpage1.style.zIndex=2;
	vpage2.style.zIndex=1;
	vpage3.style.zIndex=0;
}

function servico() {
	vpage2.style.zIndex=2;
	vpage1.style.zIndex=1;
	vpage3.style.zIndex=0;
}

function contato() {
	vpage3.style.zIndex=2;
	vpage1.style.zIndex=1;
	vpage2.style.zIndex=0;
}

</script>

</body>
</html>

Mas pra página ficar bonitinha e enxuta, coloca esse script num arquivo externo. fica mais clean

Edição feita por: Lengrat, 11/03/2006, 01:07.

pow cara!! muuuito show!
era issu mexmu ki eu precisava
valew mexmu!

flw!!!

ae Lengrat... era issu mesmo q eu precisava... so tenho uma divida.... ainda...
o posetion absolute define exatamente aonde deve fikar a imagem certo??

poder dependendo da resolução do monitor issu pode mudar... por exempo... eu posso configurar pra fikar no canto direito do topo do site, mas se a relosucao do monitor for maior a imagem vai fikar fora do topo, localizado ainda mais a direita..

issu tem alguma maneira simples de se resolver ou... se for mto complicado... pode dexa ki entao vou fazer com querystring mexmu

valew

Voce pode retirar o position de la se vc quiser e colocar a div dentro da TD da Table, se sua estrutura for estrutura de tabela, sem problema nenhum

Edição feita por: Lengrat, 11/03/2006, 22:37.

Tópico antigo, mas deu vontade de responder

Banner:

<img src="home.gif" name="banner" id="banner" />

iFrame:

<iframe url="home.php" name="iframe1" id="iframe1" />

Links:

<a href="home.php" target="iframe1" onclick="banner.src='home.gif'">Home</a>
<a href="servicos.php" target="iframe1" onclick="banner.src='servicos.gif'">Home</a>
<a href="contato.php" target="iframe1" onclick="banner.src='contato.gif'">Home</a>

Simples e objetivo