GARANTIR DESCONTO

Fórum Mudar imagem ao clicar #568820

28/06/2013

0

Java

Bom dia Galera, estou a desenvolver junto com uma galera um site, ele tem uns menus expansivo e tal, feito exatamente assim 
<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

<img  href="javascript:;" onmousedown="toggleDiv('DIV');"  src="VER.png" style="float:right;cursor:pointer; ">
porem não temos nenhum conhecimento em javascript e queríamos ajuda para simplesmente mudar a imagem ao clicar sobre ela. Exemplo: Clique para abrir e Clique para Fechar, do menu expansivo! Temos Varios menus expansivos como este.. Aproximadamente 8 em todo site, e cada um seja independente e quando um tiver aberto ao clicar em outro, o outro feche! Seria possível Fazer algo como isso em java?
Jonata Santos

Jonata Santos

Responder

Posts

29/06/2013

Okabe Rintarou

Na verdade é Javascript, e não Java. São coisas diferentes. Para Javascript, teste isso: 
<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a;
    }
</script>
<div id="main_img">
    <img id="img" src="http://placehold.it/110x110">
</div>
<div id="thumb_img">
    <img src='http://placehold.it/120x60'  onclick='changeImage("http://placehold.it/120x60");'>
    <img src='http://placehold.it/130x60'  onclick='changeImage("http://placehold.it/130x60");'>
    <img src='http://placehold.it/140x60'  onclick='changeImage("http://placehold.it/140x60");'>
</div>
From: http://jsfiddle.net/Regisc/7wpAw/
Responder

Gostei + 0

29/06/2013

Jonata Santos

Galera.. Encontrei um jeito de fazer um um outro forum, foi bem assim: 
<script type="text/javascript">
var mais = 'images/mais.png';
var menos = 'images/menos.png';


function troca( el, obj )
{
	if( el.alt==mais )
	{
		el.src = menos;
		el.alt = menos;
		id( obj ).src = mais;
		id( obj ).alt = mais;
	}
	else
	{
		el.src = mais;
		el.alt = mais;
		id( obj ).src = menos;
		id( obj ).alt = menos;
	}
}
function id( el ){
	return document.getElementById( el );
}

</script>


<img href="javascript:;" onmousedown="toggleDiv('minha-div-1');" id="imagem" src="images/menos.png" alt="menos.jpg" border="0" onclick="troca( this, 'imagem2' )" style="cursor:pointer;" />
Esta funcionando tranquilo porem somente faz em 1 imagem, quando tento colocar em outra imagem ela some. E como eu disse antes preciso de pelo menos 8 dessas coisas. Fazer esse trabalho com esse código acima seria o correto? Se sim, alguem poderia ajudar a terminalo!!
Responder

Gostei + 0

29/06/2013

Jonata Santos

[quote="ElPsyCongroo"]Na verdade é Javascript, e não Java. São coisas diferentes. Para Javascript, teste isso: 
<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a;
    }
</script>
<div id="main_img">
    <img id="img" src="http://placehold.it/110x110">
</div>
<div id="thumb_img">
    <img src='http://placehold.it/120x60'  onclick='changeImage("http://placehold.it/120x60");'>
    <img src='http://placehold.it/130x60'  onclick='changeImage("http://placehold.it/130x60");'>
    <img src='http://placehold.it/140x60'  onclick='changeImage("http://placehold.it/140x60");'>
</div>
From: http://jsfiddle.net/Regisc/7wpAw/
Quase, mas não é bem isso que eu procuro. E mais pra quando vc clicar no botão ele mudar. Tipo ele ta escrito
Abrir
quando clicar no botão abrir ele mude para
fechar
.. E de novo eu digo Sou leigo em linguagem javascript e se tem como mudar o teu exemplo a ficar desse modo eu agradeceria se pudesse ajudar!
Responder

Gostei + 0

29/06/2013

Okabe Rintarou

"quando tento colocar em outra imagem ela some. " Poste um exemplo.
Responder

Gostei + 0

29/06/2013

Jonata Santos

[quote="ElPsyCongroo"]"quando tento colocar em outra imagem ela some. " Poste um exemplo.
Mais ou menos assim: 
<script type="text/javascript">
var mais = 'images/mais.png';
var menos = 'images/menos.png';
var mais = 'images/mais1.png';
var menos = 'images/menos1.png';


function troca( el, obj )
{
	if( el.alt==mais )
	{
		el.src = menos;
		el.alt = menos;
		id( obj ).src = mais;
		id( obj ).alt = mais;
		el.src = menos1;
		el.alt = menos1;
		id( obj ).src = mais1;
		id( obj ).alt = mais1;
	}
	else
	{
		el.src = mais;
		el.alt = mais;
		id( obj ).src = menos;
		id( obj ).alt = menos;
		el.src = mais1;
		el.alt = mais1;
		id( obj ).src = menos1;
		id( obj ).alt = menos1;

	}
}
function id( el ){
	return document.getElementById( el );
}

</script>

<img href="javascript:;" onmousedown="toggleDiv('minha-div-1');" id="imagem" src="images/menos.png" alt="menos.jpg" border="0" onclick="troca( this, 'imagem2' )" style="cursor:pointer;" />


<img href="javascript:;" onmousedown="toggleDiv('minha-div-2');" id="imagem" src="images/menos1.png" alt="menos1.jpg" border="0" onclick="troca( this, 'imagem2' )" style="cursor:pointer;" />
Seria mais ou menos assim..
Responder

Gostei + 0

29/06/2013

Okabe Rintarou

Na verdade, esse método: 
troca( this, 'imagem2' )
Troca imagens entre 2 img. O certo seria: 
<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar