Ir para conteúdo

POWERED BY:

Arquivado

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

Globo Solucoes

Criar função mostrar/esconder em imagem

Por , em Javascript

Recommended Posts

Globo Solucoes    0

Globo Solucoes
Postado

Eu criei esta imagem com um link oculto tipo mostrar/esconder para meu site

 

segue código: 

Ocultar texto dentro de um botão 
<B>Clique na imagem para a lista de links</B><br>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">     function cma(id) {       var cmd = document.getElementById(id);       
if( cmd.style.visibility == "hidden" ) {         cmd.style.visibility = "visible";       } 
else {         cmd.style.visibility = "hidden";       } }</script><style type="text/css">body {	margin: 20px;}.cma
 {	background: #EFEFEF;	border: 3px solid #000;	margin: 5px 0 0 0;	padding: 5px;	width: 100px;	top: 40px;	left: 20px;	
 position: left;	z-index: 3;}</style></head><body><img SRC='http://img194.imageshack.us/img194/68/megauploadm.png' onclick="cma('mn');">
 <div id="mn" class="cma" style="visibility: hidden;"><i>DVD 1:<br></i> 
<A HREF="http://www.google.com.br/search?hl=pt-BR&q=comando+pular+proxima+linha&meta=&rlz=1I7ADFA_pt-BR" TARGET="_blank">Parte 1</A>
</div></body></html>

>Problema: Coloco os código uma vez, Òtimo.. funciona perfeitamente, MAS quando coloco mais de uma imagem, com respostas/textos diferentes sempre aparece somente no primeiro

e não em cada imagem seu respestivo texto

Um interfere no outro, eu ja vi funcionando em outros sites, varios na mesma página , mas não consigo fazer

Ajudas: msn ou e-mail sacglobo@gmail.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara... tá muito bagunçado esse código ai.. identa ele e posta de novo..

 

atente que você não deve repetir IDs numa mesma página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum... acontece o seguinte.. somos pessoas, e lemos o código.. então é ruim entender linhas de código se elas estiverem dessa forma

 

para as máquinas, boas práticas de programação como indentação, não fazem diferença, mas para olhos humanos fazem.

veja

<html>
<head>
<script type="text/javascript">
function toggle( id ){
	var div = document.getElementById( id );
	div.style.display = div.style.display=='block' ? 'none' : 'block';
}
</script>
<style type="text/css">
#um, #dois { display: none; }
</style>
</head>
<body>
	<img src="http://img194.imageshack.us/img194/68/megauploadm.png" alt="" onclick="toggle('um')" />
	<div id="um" style="display: none;">Conteudo da DIV Um</div>
	
	<br />
	<img src="http://img194.imageshack.us/img194/68/megauploadm.png" alt="" onclick="toggle('dois')" />
	<div id="dois" style="display: none;">Conteudo da DIV Dois</div>
</body>
</html>
bem melhor de ler, e fácil de entender..

fica difícil te ajudar, se você não se predispor a nos ajudar também.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sony Linhares    0

Sony Linhares
Postado

Amigos estou tendo um problema parecedio!

 

uso um código pra interagir com um ambiente, neste quando clico em uma área interativa abre uma nova imagem, e quando clicado nesta iamgem de novo ela fecha. Só que o código funcina perfeitamente quando uso uma vez só, depois, mesmo referindo pra outra área ele somente abre as primeiras imagens e não fecha, tendo funcionamento normal somente para ultima colocada.

 

abaixo o código:

 

<!-- images -->

<plugin name="img1" url="interative/quadro1.png" align="center" alpha="0" visible="false" onclick="action(hideallimages);" />

 

 

<!-- actions to show/hide images -->

<action name="hideimage">

tween(plugin[%1].alpha,0,distance(1,0.5),easeoutquad,set(plugin[%1].visible,false));

</action>

 

<action name="hideallimages">

action(hideimage,img1);

</action>

 

<action name="showimage">

action(hideallimages);

set(plugin[%1].visible,true);

tween(plugin[%1].alpha,1,distance(1,0.5),easeoutquad);

</action>

 

 

<!-- hotspots -->

 

<hotspot name="quadro1"

keep="false"

visible="true" enabled="true" handcursor="true" capture="true" children="true"

zorder="0"

fillcolor ="0xffffff" fillalpha ="0.00" borderwidth ="0.0" bordercolor ="0xffffff" borderalpha ="0.00"

fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="4.0" bordercolorhover="0xffffff" borderalphahover="0.80"

fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"

onover=""

onhover=""

onout=""

ondown=""

onup=""

onclick="action(showimage,img1);"

>

<point ath="-94.7990" atv="-25.2320" />

<point ath="-94.7948" atv=" -6.6098" />

<point ath="-75.4144" atv=" -7.3621" />

<point ath="-75.6520" atv="-25.7225" />

</hotspot>

 

<!-- images -->

<plugin name="img2" url="interative/quadro2.png" align="center" alpha="0" visible="false" onclick="action(hideallimages);" />

 

 

<!-- actions to show/hide images -->

<action name="hideimage">

tween(plugin[%1].alpha,0,distance(1,0.5),easeoutquad,set(plugin[%1].visible,false));

</action>

 

<action name="hideallimages">

action(hideimage,img2);

</action>

 

<action name="showimage">

action(hideallimages);

set(plugin[%1].visible,true);

tween(plugin[%1].alpha,1,distance(1,0.5),easeoutquad);

</action>

 

<!-- hotspots -->

 

<hotspot name="quadro2"

keep="false"

visible="true" enabled="true" handcursor="true" capture="true" children="true"

zorder="0"

fillcolor ="0xffffff" fillalpha ="0.00" borderwidth ="0.0" bordercolor ="0xffffff" borderalpha ="0.00"

fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="4.0" bordercolorhover="0xffffff" borderalphahover="0.80"

fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"

onover=""

onhover=""

onout=""

ondown=""

onup=""

onclick="action(showimage,img2);"

>

<point ath="-155.2657" atv="-21.2748" />

<point ath="-155.4647" atv=" -6.2378" />

<point ath="-150.5925" atv=" -4.7386" />

<point ath="-150.2850" atv=" -8.3910" />

<point ath="-146.5107" atv=" -8.2930" />

<point ath="-146.0936" atv="-23.7166" />

<point ath="-146.0936" atv="-23.7166" />

<point ath="-146.0888" atv="-23.5312" />

</hotspot>

 

 

<!-- images -->

<plugin name="img3" url="interative/livros.png" align="center" alpha="0" visible="false" onclick="action(hideallimages);" />

 

 

<!-- actions to show/hide images -->

<action name="hideimage">

tween(plugin[%1].alpha,0,distance(1,0.5),easeoutquad,set(plugin[%1].visible,false));

</action>

 

<action name="hideallimages">

action(hideimage,img3);

</action>

 

<action name="showimage">

action(hideallimages);

set(plugin[%1].visible,true);

tween(plugin[%1].alpha,1,distance(1,0.5),easeoutquad);

</action>

 

<hotspot name="livros"

keep="false"

visible="true" enabled="true" handcursor="true" capture="true" children="true"

zorder="0"

fillcolor ="0xffffff" fillalpha ="0.00" borderwidth ="0.0" bordercolor ="0xffffff" borderalpha ="0.00"

fillcolorhover="0xffffff" fillalphahover="0.10" borderwidthhover="4.0" bordercolorhover="0xffffff" borderalphahover="0.80"

fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"

onover=""

onhover=""

onout=""

ondown=""

onup=""

onclick="action(showimage,img3);"

>

<point ath="156.7737" atv=" 6.3412" />

<point ath="163.0518" atv=" 7.1674" />

<point ath="158.9487" atv=" 10.7833" />

<point ath="152.5613" atv=" 17.2533" />

<point ath="145.6787" atv=" 15.1435" />

<point ath="148.6054" atv=" 12.4019" />

<point ath="148.1146" atv=" 11.3835" />

<point ath="150.7101" atv=" 9.3836" />

<point ath="150.7114" atv=" 8.8812" />

</hotspot>

 

 

Desde já agradeço a ajuda, se precisar de mais alguma aprte do código é só falar!

Compartilhar este post

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

Informação importante

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

  Aceito