Mudar imagem ao clicar
Bom dia Galera, estou a desenvolver junto com uma galera um site, ele tem uns menus expansivo e tal, feito exatamente assim
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?
<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; ">
Jonata Santos
Curtidas 1
Respostas
Okabe Rintarou
28/06/2013
Na verdade é Javascript, e não Java. São coisas diferentes. Para Javascript, teste isso:
From: http://jsfiddle.net/Regisc/7wpAw/
<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>
GOSTEI 0
Jonata Santos
28/06/2013
Galera.. Encontrei um jeito de fazer um um outro forum, foi bem assim:
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!!
<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;" />
GOSTEI 0
Jonata Santos
28/06/2013
[quote="ElPsyCongroo"]Na verdade é Javascript, e não Java. São coisas diferentes. Para Javascript, teste isso:
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
<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>
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!
GOSTEI 0
Okabe Rintarou
28/06/2013
"quando tento colocar em outra imagem ela some. "
Poste um exemplo.
GOSTEI 0
Jonata Santos
28/06/2013
[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;" />
GOSTEI 0
Okabe Rintarou
28/06/2013
Na verdade, esse método:
Troca imagens entre 2 img.
O certo seria:
troca( this, 'imagem2' )
<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()"/>
GOSTEI 0