Ir para conteúdo

POWERED BY:

Arquivado

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

Lou Poulit

[Resolvido] Imagem/âncora sobre swf

Por , em Desenvolvimento frontend

Recommended Posts

Lou Poulit    0

Lou Poulit
Postado

Amigos amantes de CSS, boa madrugada...

Esgotei meus módicos recursos de HTML/CSS para:

 

Posicionar uma imagem/âncora (ou uma área clicável, hotspot) sobre um filme com extensão swf,

para direcionamento para dentro e para fora do site.

 

A idéia básica é uma home pequena, contendo apenas o swf e, sobre este, alguns botões.

 

Derrepente, nem é possível fazer isso com CSS (sem fazer curso de Flash)...

Mas como preciso dar solução para isso, ficarei muitíssimo grato se alguém dentre vocês, mais cascudo que eu,

se dispuser a me dar uma ajuda.

 

Tenho certeza de que alguma solução para esta proposta despertaria o interesse

de muitas pessoas que, como eu, aprenderam a gostar tanto de CSS que imaginam

que ela tenha solução para tudo.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Você quer que ao clicar em um Flash seja redirecionado para uma outra página? Assim:

 

<a href="http://thiagoteste.site90.com"> 
  <object type="application/x-shockwave-flash" data="http://thiagotestes.site90.com/acao/images/transicao/galeria.swf" width="998" height="166"> 
    <param name="movie" value="http://thiagotestes.site90.com/acao/images/transicao/galeria.swf" /> 
  </object>
</a>

Sem chances... Até porque não pode colocar um elemento block - o object, no caso - dentro de um inline - o a, no caso.

 

Por que não faz isso no próprio Flash? Se quiser fazer nele, me fala que eu movo o tópico. ^_^

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Grande Thiago, de princípio agradeço por sua predisposição em responder.

Não, mermaum, venho tentando o contrário, por duas opções:

 

1) ao clicar numa imagem (png, jpg, gif), com posicionamento absoluto sobre o flash, ser redirecionado;

2) clicar num hotspot (span vazio) em vez da imagem, tendo a âncora fora do flash.

 

Nas minhas tentativas, consigo posicionar a imagem(âncora) em qualquer lugar, menos sobre o flash.

Nem de modo direto, nem como background de um elemento block. Como rollover ancorado fora do flash também

não deu resultado.

 

O posicionamento da âncora (absoluto), feito em relação ao elemento que contém o flash (relativo)

funciona perfeitamente, mas não aparece porque o flash entra por cima. Criar com posicionamento relativo

um texto de âncora fora do flash e, como absoluto, um span (aninhado na âncora), também foi inútil.

 

Configurar no html o fundo (flash) e os links em layers distintas, com z-index diferentes, igualmente

não deu resultado. O flash aparece sempre por cima. Ou eu não estou sabendo empurrá-lo para baixo,

ou isso não é possível com CSS.

 

Sim, usando o editor flash seria possível. Mas eu não tenho este software. Tenho até um Premiere Pro,

que faz o filme e exporta com formato swf, mas neste caso não adiantaria. O problema não é o filme. Além

disso, o grande "barato" seria descobrir como fazer com CSS. Ando "apaixonado" por folhas de estilo, porém

(assim como as mulheres) elas nem sempre fazem de tudo. Ou será que eu não sou convincente?

 

Aprender é preciso. E oferecer esta possibilidade valoriza muito o Fórum.

 

Grande abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ando "apaixonado" por folhas de estilo, porém

(assim como as mulheres) elas nem sempre fazem de tudo. Ou será que eu não sou convincente?

haha ^_^

 

Ai depende de 'como você pede'. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Vamos lá... o flash por algum motivo, sempre quer ficar na frente de tudo!

 

para contornar isso, é preciso definir wmode como transparent.

E ai sim, você consegue alterar o eixo Z (perpendicular à tela), com a propriedade z-index.

 

Para isso, z-index só funciona em elementos que tenham algum position diferente de static explicitamente declarado.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Ai funcionará. Tudo é uma questão de 'como' você faz.

Seguindo a tua analogia, pensa que o flash é a tua sogra. http://forum.imasters.com.br/public/style_emoticons/default/coolio.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

minha soooogra???!!! mermaum, sou separado há mais de 20 anos. e em vários momentos achei que é bom demais. nem me faça pensar em sogra... se bem que o flash seria uma sogra adorável, apenas por não fazer fofocas com outros programas. além do que... basta saber pedir que ele faz.

 

peraí... estou fuçandu vários posts sobre wmode... vou testar, depois dou retorno.

 

abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Lou Poulit,

 

só lhe peço que não use caixa alta nos seus posts. ^_^

 

09ª Regra

É proibido a abertura de tópicos com título: "ME AJUDE", "PELO AMOR DE DEUS", "ESTOU DESESPERADO", "URGENTE", "SOCORRO", "HELP", "PEDIDO", "IMPLORO", "PLEASE", "DUVIDA", ou qualquer coisa similar, assim como utilizar Caixa Alta (letras todas em maiúsculas) no titulo ou mesmo no corpo do tópico ou post. Utilize títulos curtos e claros, que condizem com sua dúvida. Os títulos, tópicos e posts serão editados e os membros advertidos por MP.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Valeu.

Como eu disse aí em cima... Aprender é preciso.

Alguns dos meus amigos são idosos e têm deficiência visual, e peguei o hábito de usar caixa alta para facilitar as coisas para eles. Mas compreendo a necessidade das regras e limites.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Bem, amigos... Graças à colaboração de vcs creio estar perto de dar um salto no meu aprendizado, com uso combinado de html/css/flash, sem ter que usar um editor flash,

o que imagino ser de interesse de muita gente.

 

Testando as dicas que recebi e as que pesquisei, já tenho o seguinte:

 

1) uma página que tem um filme convertido para swf (originalmente avi), de 720x480px, com fundo transparente, dentro de um div sem forma e com posicionamento relative; e

2) duas âncoras/imagem png em um div block absolute, z-index: 999.999, sobre o flash e com sensibilidade para chamar as respectivas páginas.

 

Entretanto, disse "estar perto" pq tenho uma questão de compatibilidade do código com as leituras dos navegadores IE-8 e Firefox-3.5.3:

 

O IE entende o posicionamento CSS, mas não entende o loop=1 (nem false) dentro do código do objeto, e fica repetindo o flash;

 

enquanto que o Firefox entende loop=1 (e false) mas posiciona o div block (contendo as imagens/âncora) em relação a top e left da tela, ou seja: reconhece o arquivo de estilo, mas não o posicionamento relative do div que contém o flash.

 

Nas pesquisas encontrei (inclusive neste fórum) outras pessoas com problemas entre navegadores, mas as dicas que eles receberam não deram resultado no meu caso.

 

Alguém quer dar mais uma dica?... Botamos a bola no cal. Fico torcendo para que alguém aí queira correr para o abraço da torcida, depois que eu bater o penalti.

 

Abaixo a relação dos códigos html e css que utilizei:

 

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

 

<div id="fundo">

   	<hr align="center" color="#2080D0" size="1" width="720">

	<div>

	<object  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
		height="480" width="720">		
		<param name="movie" value="index_arquivos/topo-pinacle.swf">
        	<param name="quality" value="high"> 
		<param name="wmode" value="transparent">    
        	<embed src="index_arquivos/topo-pinacle.swf" 
		width="720" height="480" quality="high" 
		pluginspage= "http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" 
		type="application/x-shockwave-flash" wmode="transparent"
		loop="1"></embed></object></div>

	<div class="boxlinks">

		<div>	  
		<a href="http://poulitpinturasvendidas.blogspot.com"  
		border="0" target="_blank">
		<img src="index_arquivos/artesplasticas.png" title="" /></a></div>

		<div>
		<a href="http://poulitmurais.blogspot.com" 
		border="0" target="_blank">
		<img src="index_arquivos/literatura.png" title=""/></a></div>

	</div>

	</div></center>

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

 

#fundo { position: relative; } 

	#fundo .boxlinks {

	display: block;
	width: 325px;
	height: 141px;
	position: absolute;
	top: 325px;
	left: 190px;
	z-index: 999.999;
	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Desculpe... A luz só voltou agora.

 

Eu gostaria que o Firefox renderizasse como o Explorer. Se você puder comparar, vai perceber que o Fire está posicionando as âncoras em cima do flash (como eu quero) porém em relação às margens da tela. Isso me obrigaria a desistir da centralização do container.

 

Da parte do Explorer, as âncoras estão também sobre o flash e posicionadas corretamente em relação ao container. Só não está perfeito pq este navegador está teimando em fazer o looping do filme, que eu não desejo.

 

Gostaria de compatibilizar o código para que a visualização fosse perfeita nos dois navegadores, que considero preferenciais para o meu público alvo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Mermaum... Tirar a div de textos de baixo do objeto fez um desastre nos dois navegadores, descentralizou o flash... teria que reposicionar tudo na CSS...

Vendo pelo Fire, o objetivo seria conseguir que ele mantivesse o flash centralizado e entendesse o posicionamento dos textos em relação à div que contém o flash.

Mas valeu a tentativa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lou Poulit    0

Lou Poulit
Postado

Acabei de fazer o Explorer entender que não quero repetir o flash, atribuindo na tag object um param name=loop value=false. O Fire já tinha entendido antes desta atribuição.

 

Para lhe fornecer uma imagem, vou tentar um print screen na renderização do explorer... Peraí.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Bem. Eu defini uma largura aqui para o div#fundo e deu certo, ficando assim:

 

div#fundo{
position: relative;
width: 720px;
}

Como está querendo centralizar, use porcentagem para isso.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito