Jump to content

  2. →
  3. →

Photo

Ta Brabo Aqui!

Started By Neo, 27/01/2004, 08:55

  • Faça o login para participar
8 replies to this topic

#1 Neo

Neo

    Ativo

  • Usuários
  • 302 posts
  • Sexo:Não informado

Posted 27/01/2004, 08:55

Tipo galera.. ja havia postado algo parecido.. mas estou ainda no mesmo problema....

Eu tenho duas tabelas... no lado esquerdo eu tenho 3 fotos uma em baixo da outra e eu queria que, quando clicasse na foto do lado esquerdo, aparecece a respectiva foto no lado direito... Já me disseram p/ usar iframe, so que eu naum tenho nenhuma noção sobre iframe... alguem sabe como fazer isso sem iframe!??

ou se alguem souber com iframe, me explique please.. vou colocar abaixo o código da popup com as fotos:

<%@LANGUAGE="vb script: window.close()" target="_top"><img src="imagens/fechar.gif" width="14" height="14" border="0" align="absmiddle" dorder="0">Fechar
              janela</a></font></div></td>
          <td width="130" valign="middle"><div align="right"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="popup-fotos2.asp"><img src="imagens/seta_small.gif" width="9" height="14" border="0" align="absmiddle">ver
              mais fotos</a></font></div></td>
        </tr>
      </table></td>
    <td></td>
  </tr>
</table>
</body>
</html>


Preciso muito dessa ajuda!!!! Valeu Colegas!

#2 Junior

Junior

    Normal

  • Usuários
  • 75 posts
  • Sexo:Não informado
  • Localidade:Campo Grande -MS
  • Interesses:Informática, linguagens, como: JS,PHP,HTML,ASP.

Posted 27/01/2004, 09:22

Bom eu naum sou muito bom nisso(pedi mais opinião sobre iframe do que nunca)
mas acho que eu posso ajudar com o que eu aprendi: bom a tabela vc quer no lado esquerdo, certo?Bom aí vc quer que quando clica em uma figura a descrição aparece do lado da tabela, certo?

Tah eu vou tentar por o código(depois vc pede ajudar pros outros pq eu não sou mto bom nisso, Without a nick ou quem sabe disso ve se ta certo o q eu vou escrever)
<html><head><title>titulo da sua pagina</title></head><tr><td align="left"><a href="coloque aki a pagina.html><image src="suaimagem.gif"></td></tr><iframe src="pagina.html name="nomedoiframe" frameborder="no" scrooling="auto" widht="500" height="1000"></iframe></html>

Falows
Nome do site: Anime Master
Endereço do site: http://ceuanime.webcindario.com
Meu nick no site: Yusuke Urameshi

Imagens na Assinatura não é permitido. Klaus

#3 COWBOY_4ever

COWBOY_4ever

    Rodeio Universitário

  • Usuários
  • 483 posts
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.

Posted 27/01/2004, 10:43

tenho nenhuma noção sobre iframe... alguem sabe como fazer isso sem iframe!??


Uma maneira de fazer isso sem usar iframe seria usar frames, mas para ficar legal vc teria que fazer um html para cada foto e isso daria mais trabalho.
Sem criar um html para cada foto, e sem usar linguagem dinâmica a melhor forma de se fazer seria com iframe mesmo.
Veja se o que vc quer é mais ou menos isso que está na popup "Lançamento"?

Lembro que tinha um tuto de iframe aqui na seção html, mas como não achei aí vai uma explicação sobre o assunto:

Iframe

A tag iframe foi proposta na versão 4.0 do HTML, atualmente é suportada pelo Internet Explorer 4 (ou superiores) e pelo Netscape 6 (ou superiores).
A tag IFRAME permite inserir uma página HTML dentro de outra.

Abaixo temos alguns atributos e propridades:

LONGDESC: atributo que especifica um link para uma descrição mais longa do frame.
NAME: Assinala um nome para o frame corrente.
ALIGN: Faz o alimento do frame, sendo possível as seguintes posições: top, middle, bottom, left e right para alinhamento superior, centro vertical, inferior, esquerdo e direito respectivamente.
SRC: especifica a localização das URLs contidas no frame.
HEIGHT: especifica a altura do frame.
WIDTH: especifica a largura do frame.
FRAMEBORDER: determina o valor da borda em pixels.
SCROLLING: determina a barra de rolagem do frame, tendo como opções permitidas yes, no e auto.
HSPACE: especifica as margens para o elemento.
MARGINWIDTH: atributo que especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens esquerda e direita.
MARGINHEIGHT: especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e seu topo e a parte de baixo.
FRAMESPACING: número de espaçamento entre frames em pixels.
DATAFLD: nome da coluna da fonte de dados para a caixa.
DATASRC: identificação da fonte de dados que fornece o conteúdo que está ligado a este elemento.

Exemplo simples de iframe:

<!-- Página Superior -->
<iframe marginwidth=0 marginheight=0 src="topo.htm" frameborder=0 width=100% scrolling=no height=50></iframe>
<!-- Fim -->
<!-- Página Central -->
<iframe marginwidth=0 marginheight=0 src="centro.htm" frameborder=0 width=100% scrolling=no height=350></iframe>
<!-- Fim -->
<!-- Página Inferior -->
<iframe marginwidth=0 marginheight=0 src="baixo.htm" frameborder=0 width=100% scrolling=no height=50></iframe>
<!-- Fim -->


| COWBOY_4ever
|
| ====================================
| Cavalo eu puxo no toco, burro eu puxo no morão.
| Gosto de whisky, mas a cerveja é minha paixão.
| Sou gamado na loira, mas da morena eu não largo não!
| ----------------------------------------------------------------

#4 H^llz

H^llz

    @betalabsbr

  • Usuários
  • 151 posts
  • Sexo:Masculino
  • Localidade:SP

Posted 27/01/2004, 11:48

realmente o iframe ia polpar algumas linhas no seu código fonte ...
Luan
T.(11) 3522 6826
Rua Bandeira Paulista 702, 12º andar
http://betalabs.com....utos/ecommerce/

#5 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 27/01/2004, 14:27

Olha, fiz este script. Você muda o nome das imagens:

<script language="javascript">
<!--
function imagem(arquivo) {
  document.getElementById("imagem").src=arquivo;
}
//-->
</script>
<table border=0 width=100%>
<tr>
<td width=50%><img src="imagem1.gif" onclick="imagem('grande1.gif');"><br><br><br>
<img src="imagem2.gif" onclick="imagem('grande2.gif');"><br><bR><br>
<img src="imagem3.gif" onclick="imagem('grande3.gif');"></td>
<td width=50%><img src="imagemgrande.gif" id="imagem"></td>
</tr>
</table>


Apenas mudem os nomes das imagens. O id não mude, caso queira mudar, mude também o nome do id no script.

#6 Neo

Neo

    Ativo

  • Usuários
  • 302 posts
  • Sexo:Não informado

Posted 28/01/2004, 08:08

muito obrigado pelo script.. eu sabia que tinha uma forma de fazer sem ser através de iframe!!! Valeu mesmo! Um grande abraço!

#7 COWBOY_4ever

COWBOY_4ever

    Rodeio Universitário

  • Usuários
  • 483 posts
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.

Posted 28/01/2004, 11:48

Olha, fiz este script. Você muda o nome das imagens:

<script language="javascript">
<!--
function imagem(arquivo) {
  document.getElementById("imagem").src=arquivo;
}
//-->
</script>
<table border=0 width=100%>
<tr>
<td width=50%><img src="imagem1.gif" onclick="imagem('grande1.gif');"><br><br><br>
<img src="imagem2.gif" onclick="imagem('grande2.gif');"><br><bR><br>
<img src="imagem3.gif" onclick="imagem('grande3.gif');"></td>
<td width=50%><img src="imagemgrande.gif" id="imagem"></td>
</tr>
</table>


Apenas mudem os nomes das imagens. O id não mude, caso queira mudar, mude também o nome do id no script.

Muito bom esse script. (y)
Mas nas imagens pequenas não aparece o cursor hand.. qual a melhor forma de fazê-lo aparecer? Só CSS do cursor hand na tag img?
| COWBOY_4ever
|
| ====================================
| Cavalo eu puxo no toco, burro eu puxo no morão.
| Gosto de whisky, mas a cerveja é minha paixão.
| Sou gamado na loira, mas da morena eu não largo não!
| ----------------------------------------------------------------

#8 -Mosque-

-Mosque-

    ;D

  • Usuários
  • 182 posts
  • Sexo:Não informado
  • Localidade:Belo Horizonte/MG

Posted 28/01/2004, 23:12

Muito bom esse script. (y)
Mas nas imagens pequenas não aparece o cursor hand.. qual a melhor forma de fazê-lo aparecer? Só CSS do cursor hand na tag img?

É isso mesmo Cowboy.
Eu fiz aqui olhem so:
CSS:

<style>
img.hand { cursor: hand };
</style>

PS: Coloque isso nas entre as tag <head></head>

Ai é so adicionar o que esta em negrito:

<script language="javascript">
<!--
function imagem(arquivo) {
  document.getElementById("imagem").src=arquivo;
}
//-->
</script>
<table border=0 width=100%>
<tr>
<td width=50%><img class="hand" src="imagem1.gif" onclick="imagem('grande1.gif');"><br><br><br>
<img class="hand" src="imagem2.gif" onclick="imagem('grande2.gif');"><br><bR><br>
<img class="hand" src="imagem3.gif" onclick="imagem('grande3.gif');"></td>
<td width=50%><img src="imagemgrande.gif" id="imagem"></td>
</tr>
</table>


Edição feita por: -Mosque-, 29/01/2004, 15:42.

[°..°] MøsqùÉ
[°..°] Email+MSN: mosque10@hotmail.com
[°..°] Aqui no fórum: Fuçando...

#9 __dino__

__dino__

    24 Horas

  • Usuários
  • 411 posts
  • Sexo:Não informado

Posted 06/05/2004, 21:23 

<img class="hand" src="imagem2.gif" onclick="imagem('grande2.gif');">
tipo assim tá vendo esse onclick ?
tipo eu gostaria que ele fizesse outra função além dessa!
eu gostaria que além de aparecer a imagem grande, aparecesse um comentário sobre essa foto? tem como??
www.anunciautos.com.br - venda e compre seu veiculo - GRÁTIS para anunciar

www.artweb7.com.br
www.clicgyn.com.br
Voltar para Javascript / DOM / AJAX / ECMAScript


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Javascript / DOM / AJAX / ECMAScript
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq