Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

powerpezzi

Problema com um codigo para janela popup

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

powerpezzi    0

powerpezzi
Postado

Bom estou desenvolvendo um site para a empresa onde trabalho para meu trabalho de estagio

Estou tendo dificuldades na pagina de produtos pois minha idéia é colocar as fotos dos produtos da empresa uma ao lado da outra em tamanho pequeno e quero que quando o usuário posicione o mouse em cima de um determinado produto abra uma janela que não seria bem uma janela popup, seria mais uma layer, abra essa layer com a imagem maior

E quando a seta do mouse é tirado de cima da foto a janelinha desapareça.

Bom pesquisei por ai e consegui este código:

----------------------------------------

 

Head

<style>

#pop{display:none;position:absolute;top:50%;left:30%;margin-left:-150px;margin-top:-100px;padding:10px;width:300px;height:200px;border:0px solid #d0d0d0 }.style4 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

}

</style>

</head>

<body>

<div id="pop"><a href="imagens\conj churrasco 5 pçs.jpg" onmouseout="document.getElementById('pop').style.display='none';"><img src="imagens/conj churrasco 5 pçs.jpg"></a><br />

</div>

<a href="imagens\conj churrasco 5 pçs 1.png" onmouseover="document.getElementById('pop').style.display='block';"><img src="imagens/conj churrasco 5 pçs 1.png" width="167" height="89"></a>

</body>

</html>

 

Esse código com uma imagem ficou bem o que eu queria, testei e tudo certo ele aparece a layer com a imagem maior quando o mouse esta em cima da imagem menor, e quando tiro a seta da imagem a layer some.

Então usei um basico ctrl c ctrl v para repetir o código e o procedimento com o próximo produto, mas quando vou testar ele continua abrindo a primeira imagem maior e não a que foi inserida depois .

Pra segunda imagem fiz exatamente igual ao codigo acima, só substitui as imagens, e não funcina só com uma

será que alguém pode me da uma luz de como resolver isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

dibob    0

dibob
Postado

Bom estou desenvolvendo um site para a empresa onde trabalho para meu trabalho de estagio

Estou tendo dificuldades na pagina de produtos pois minha idéia é colocar as fotos dos produtos da empresa uma ao lado da outra em tamanho pequeno e quero que quando o usuário posicione o mouse em cima de um determinado produto abra uma janela que não seria bem uma janela popup, seria mais uma layer, abra essa layer com a imagem maior

E quando a seta do mouse é tirado de cima da foto a janelinha desapareça.

Bom pesquisei por ai e consegui este código:

----------------------------------------

 

Head

<style>

#pop{display:none;position:absolute;top:50%;left:30%;margin-left:-150px;margin-top:-100px;padding:10px;width:300px;height:200px;border:0px solid #d0d0d0 }.style4 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

}

</style>

</head>

<body>

<div id="pop"><a href="imagens\conj churrasco 5 pçs.jpg" onmouseout="document.getElementById('pop').style.display='none';"><img src="imagens/conj churrasco 5 pçs.jpg"></a><br />

</div>

<a href="imagens\conj churrasco 5 pçs 1.png" onmouseover="document.getElementById('pop').style.display='block';"><img src="imagens/conj churrasco 5 pçs 1.png" width="167" height="89"></a>

</body>

</html>

 

Esse código com uma imagem ficou bem o que eu queria, testei e tudo certo ele aparece a layer com a imagem maior quando o mouse esta em cima da imagem menor, e quando tiro a seta da imagem a layer some.

Então usei um basico ctrl c ctrl v para repetir o código e o procedimento com o próximo produto, mas quando vou testar ele continua abrindo a primeira imagem maior e não a que foi inserida depois .

Pra segunda imagem fiz exatamente igual ao codigo acima, só substitui as imagens, e não funcina só com uma

será que alguém pode me da uma luz de como resolver isso?

 

<style>

#pop{

display:none;

position:absolute;

top:50%;

left:30%;

margin-left:-150px;

margin-top:-100px;

padding:10px;

width:300px;

height:200px;

border:0px solid #d0d0d0;

}

.style4 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9px;

}

.lnk {

cursor:pointer;

}

</style>

<script language="javascript" type="text/javascript">

function abreImg(img){

document.getElementById('pop').innerHTML = '<img src="imagens/' + img + '">';

document.getElementById('pop').style.display = 'block';

}

function fechaImg(){

document.getElementById('pop').style.display = 'none';

}

</script>

</head>

<body>

<div id="pop"></div>

<a class="lnk" onmouseover="abreImg('imagemGrande1.jpg');" onmouseout="fechaImg();">

<img src="imagens/imagemPequena1.jpg">

</a>

<a class="lnk" onmouseover="abreImg('imagemGrande2.jpg');" onmouseout="fechaImg();">

<img src="imagens/imagemPequena2.jpg">

</a>

</body>

</html>

</body>

</html>

 

Obs: Sibistitua onde está "imagemPequena1.jpg" pelo nome de sua imagem em tamanho pequeno, e onde está "imagemGrande1.jpg" pelo nome de sua imagem grande.

para adicionar mais imagens só copie do <a... até </a> e substitua o nome das imagens.

Dica: Não use nome de imagens com acentos, espaços e/ou outros caracteres especiais.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito