Abrir Imagem do href da imagem mapeada na DIV do lado

[Thiago Alves de Souza 0]

Sres.

Tenho 3 divs na minha página. Uma do lado da outra. Tenho uma imagem mapeada na primeira div da esquerda (Campo) e gostaria de que no momento do clic sobre a área mapeada (Jogador1, 2 ou 3), a imagem que seria aberta na tela,seja aberta na div da direita (Jogador).....

 

Fluxo

 

--> Usuário clica na área mapeada como Jogador 1;

--> A foto do Jogador 1 abre na div "Jogador".

 

Obs.: Toda vez que for clicado sobre uma área mapeada do campo (cada ponto mapedo é um jogador) a foto dele deve ser exibida na div Jogador.

 

 

O Código até onde consegui:

 

 

<div id="Campo" style="float:left; width:40%; height: 381px; border: 1px solid #1a1a1a; margin-right:7px;"> 

<center>

<img src="Campo de Futebol 3.jpg" alt="Campo Oficial" width="332" height="336" border="0" usemap="#Map"/>

<map name="Map">

<area shape="rect" coords="160,22,175,34" href="jogador 1" id="Goleiro">

<area shape="rect" coords="126,64,141,76" href="jogador 2" alt="Lateral">

<area shape="rect" coords="190,65,204,78" href="jogador 3" alt="Zagueiro">

</map>

</center>

</div>

 

<div id="Jogador" style="float:left; width:23%; height: 381px; border: 1px solid #1a1a1a; margin-right:7px;">

</div>

 

<div id="Mar" style="float:left; width:19%; height:381px; border: 1px solid #1a1a1a; margin-right:7px;">

</div>

 

Obrigado a todos que puderem me ajudar.

[Diéssica 140]

Tenta iframes ou conteúdo com ajax (aí manda abrir em um elemento específico).

[Thiago Alves de Souza 0]

Tenta iframes ou conteúdo com ajax (aí manda abrir em um elemento específico).

 

 

Obrigado pela resposta, mas eu sou iniciante... não sei como utilizar estas opções que você sugeriu.... Na verdade, estou fazendo um site para o time que vou jogar (ninguém sabe ainda) e estou tentando implementar esta idéia que tive...

 

...Um amigo pediu pra eu usar o target="Nome da div que deve abrir a imagem", mas não funcionou....

 

Se souber como me ajudar utilizando esta estrutura eu agradeço.

 

Obrigado.

[Diéssica 140]

...Um amigo pediu pra eu usar o target="Nome da div que deve abrir a imagem", mas não funcionou....

Isso aí de target tu faz com iframe.

 

Dá uma pesquisada primeiro sobre.

 

:seta: http://www.fazersitegratis.com/iframe-%E2%80%93-o-que-e-um-iframe-e-como-usar/

:seta: http://www.codigofonte.net/dicas/html/296_direcionar-links-para-um-iframe

 

Não recomendo, mas se tu é iniciante, aprender Ajax nem adianta...

[Thiago Alves de Souza 0]

Obrigado pela dica.... Dei uma lida no material e funcionou.....hehehe....

 

falta só alguns ajustes agora, porque são 4 Divs,

 

a primeira da esquerda com o menu....

a segunda com a foto do campo mapeada.....

a terceira a que está apresentando a imagem do clic sobre a área mapeada (a do Iframe)...

a quarta, que vou colocar uns banners....

 

Ninguém sabe da idéia que tive, nem falei nada pra eles não cobrarem....hehehe

 

Quando estiver pronto eu mostro pra todo mundo....

 

Valeu mesmo!!!