[Resolvido] Trocar de imagem quando clicar

Raytwo · Maio 8, 2010

Olá pessoal, ja procurei na internet mas não sei direito como colocar as palavras-chave, pesquisei aqui no fórum e não achei

Minha dúvida não é tão cabulosa assim (assim meu acho =P)

gostaria de quando clicar na imagem que vai ser um (+) irá expander a div trocando para um (-) e clicando de novo ele volta ao (+).

a div ja esta funcionando (com onclick) só para trocar a imagem mesmo ^^

William Bruno · Maio 8, 2010

Vai precisar de Javascript cara... só com css não dá para fazer isso.

Essa imagem ai tua, é oq ? <img /> background-image: url('..') ?

é só pegar a imagem correspondente, e trocar alterando o css dela.. ou o src (caso esteja trabalhando com a tag)

Raytwo · Maio 8, 2010

Olá William, ela não é background. é uma imagem jpeg jogada la na div (:S) ausehuasehuaeh

desculpa a falta de informação, mas eu não manjo mt css.

Guilherme Müller · Maio 8, 2010

Uma forma de fazer isso seria fazer o seguinte:

Link + / -

<a href='#' class='expandir'></a>

CSS

.expandir, .reduzir {
  display: block;
  width: 20px;
  height: 20px;
}
.expandir {
  background-image: url(imagemmais.jpg);
}
.reduzir {
  background-image: url(imagemmenos.jpg);
}

Esse CSS é bem aproximado, mas a idéia é ter uma classe para a imagem com o '+' e uma classe com o '-'. No background-image vai a imagem que você deseja.

A idéia é que você utilize javascript para trocar a classe do elemento quando ele é clicado. Quando clica-se no link, troca a classe para 'reduzir', assim a imagem de 'menos' aparece. Quando clicar de volta, troca para a classe 'expandir'. Se fizer o javascript com jQuery é bem tranquilo, caso contrário dá um pouco mais de trabalho.

Raytwo · Maio 8, 2010

Olá Guilherme

eu testei assim

<div style="height:20; width:20;"><a href='#' class='expandir'></a></div>

fica o sinal de +

e se eu colocar assim

<a href='#' class='expandir'><div style="height:20; width:20;"></div></a>

fica o de -

fica o link mas quando clica não troca

o.o estranho

se souber como posso procurar por isso na internet tb ja ajuda =D

obrigado pela atenção

abs

Evandro Oliveira · Maio 10, 2010

http://www.treemenu.net/

versão "doméstica" segue abaixo:

<ul id="menu">
   <li><span>Expandir</span>
       <ul class="submenu">
           <li><a href="#">1.1</a></li>
           <li><a href="#">1.2</a></li>
           <li><a href="#">1.3</a></li>
           <li><a href="#">1.4</a></li>
       </ul>
       <ul class="submenu">
           <li><a href="#">2.1</a></li>
           <li><a href="#">2.2</a></li>
           <li><a href="#">2.3</a></li>
           <li><a href="#">2.4</a></li>
       </ul>
       <ul class="submenu">
           <li><a href="#">3.1</a></li>
           <li><a href="#">3.2</a></li>
           <li><a href="#">3.3</a></li>
           <li><a href="#">3.4</a></li>
       </ul>
</li>

* { 
    border: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li {
    background: url('img_mais.jpg') no-repeat;
    padding-left: 10px;
}

.submenu {
    display: none;
}

.submenu li {
    background: none;
    padding: 0;
}

window.onload = function(){
    menu = document.getElementById('menu').getElementsByTagName('span');
    for(i = 0; i < menu.length; i++) menu[i].onclick = function(){
        submenu = this.parentNode.getElementsByTagName('ul').item(0);
        if(submenu.style.display == 'block'){
            submenu.style.display = 'none';
            this.parentNode.style.backgroundImage = 'url("img_mais.jpg")';
        }
        else {
            submenu.style.display = 'block';
            this.parentNode.style.backgroundImate = 'url("img_menos.jpg")';
        }
    }
}

se preferir com jQuery

$(function(){
    $('#menu span').onclick(function(){
        $('ul:first-child', this).slideToggle();
    });
});

De qualquer maneira, estou movendo para a Sessão de Javascript, onde terá melhor suporte, caso surja alguma dúvida.

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

Raytwo · Maio 11, 2010

olá Evandro, obrigado por ter movido o topico para melhor suporte, e por ter respondido minha pergunta.

então minha duvida é onde coloco essa parte

window.onload = function(){
    menu = document.getElementById('menu').getElementsByTagName('span');
    for(i = 0; i < menu.length; i++) menu[i].onclick = function(){
        submenu = this.parentNode.getElementsByTagName('ul').item(0);
        if(submenu.style.display == 'block'){
            submenu.style.display = 'none';
            this.parentNode.style.backgroundImage = 'url("img_mais.jpg")';
        }
        else {
            submenu.style.display = 'block';
            this.parentNode.style.backgroundImate = 'url("img_menos.jpg")';
        }
    }
}

pq pra mim parece Action Script (Flash)

bem... como nao entendo nada de jQuery tentarei pelo Java.

como q eu aplico o que me passou Evandro ?

eu entendi que a primeira parte vai no html, segunda é css e a terceira nao saquei :S

Gralha · Maio 11, 2010

A terceira é javascript

William Bruno · Maio 11, 2010

dentro de tags:

<script></script>

no <head> do teu documento. (arquivo.html)

isso é javascript, costumam dizer que é bem parecido mesmo.

Raytwo · Maio 11, 2010

testei, mas ficou um problema, no firefox ele expande mas nao aparece as imagens, no IE ele aparece as imagens mas nao expande o.o etaaaa navegadores pq nao existe so 1 uheuahseaueh

meu codigo esta assim

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title></title>
	<link href="style/css.css" rel="stylesheet" type="text/css" />
    <script>
	window.onload = function(){
    menu = document.getElementById('menu').getElementsByTagName('span');
    for(i = 0; i < menu.length; i++) menu[i].onclick = function(){
        submenu = this.parentNode.getElementsByTagName('ul').item(0);
        if(submenu.style.display == 'block'){
            submenu.style.display = 'none';
            this.parentNode.style.backgroundImage = 'url("../img/+.png")';
        }
        else {
            submenu.style.display = 'block';
            this.parentNode.style.backgroundImate = 'url("../img/+.png")';
        }
    }
}
</script>
</head>
<body>
   <ul id="menu">
    <li><span>Expandir</span>
        <ul class="submenu">
            <li><a href="#">1.1</a></li>
            <li><a href="#">1.2</a></li>
            <li><a href="#">1.3</a></li>
            <li><a href="#">1.4</a></li>
        </ul>
        <ul class="submenu">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
            <li><a href="#">2.4</a></li>
        </ul>
        <ul class="submenu">
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
            <li><a href="#">3.4</a></li>
        </ul>
</li>


</body>
</html>

CSS

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	position:relative;
	}


#menu li {
    background: url('../img/+.png') no-repeat;
    padding-left: 10px;

}

.submenu {
    display: none;
}

.submenu li {
    background: none;
    padding: 0;
}

mas tipo só queria que trocasse a imagem quando clicasse =D pq a div q a imagem se encontra ela ja expande quando clica ^^ brigadao ae

William parabens 8000 posts ^^

Thiago Retondar · Maio 11, 2010

window.onload = function(){
    menu = document.getElementById('menu').getElementsByTagName('span');
    for(i = 0; i < menu.length; i++) menu[i].onclick = function(){
        submenu = this.parentNode.getElementsByTagName('ul').item(0);
        if(submenu.style.display == 'block'){
            submenu.style.display = 'none';
            this.parentNode.style.backgroundImage = 'url("../img/+.png")'; // linha 7
        }
        else {
            submenu.style.display = 'block';
            this.parentNode.style.backgroundImate = 'url("../img/+.png")'; // linha 11
        }
    }
}

Olhe as linhas 7 e 11 (comentadas):

Não salve arquivos assim como você salvou - +.png. Use as letras do alfabeto (minúsculas e maiúsculas) e underline (_)

Além do mais, a linha 7 é para a imagem com sinal de mais e a linha 11, a imagem com sinal de menos.

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

Raytwo · Maio 14, 2010

mals nao ter respondido antes, tirei uns dias de folga =D

pessoal obrigado pela força, eu consegui fazer o seguinte

o unico problema é q vou ter q criar 4 linhas de codigo para cada vez q usar o codigo na mesma pagina porque ele chama por uma ID

arquivo.js

function troca(obj){
  if(obj.alt == "img/mais.png")
  {
  document.getElementById("imagem").src = "img/menos.png";
  document.getElementById("imagem").alt = "img/menos.png";
  document.getElementById("imagem2").src = "img/menos.png";
  document.getElementById("imagem2").alt = "img/menos.png";
  }
  else {
  document.getElementById("imagem").src = "img/mais.png";
  document.getElementById("imagem").alt = "img/mais.png";
  document.getElementById("imagem2").src = "img/mais.png";
  document.getElementById("imagem2").alt = "img/mais.png";
  }
}

<script src="js/arquivo.js" type="text/javascript"></script>

<img id="imagem" src="img/mais.png" alt="img/mais.png" border="0" onclick="troca(imagem)" align="right"/>

<img id="imagem" src="img/mais.png" alt="img/mais.png" border="0" onclick="troca(imagem2)" align="right"/>

desculpem mas desta forma apresenta uns erros entao eu modifiquei o codigo ficando assim

entao a cada vez que precisava inserir esta função dava uns problemas e nao abria mais, a solução ?

criar uma outra função =D

function troca(obj){
  if(obj.alt == "mais.png"){
  document.getElementById("imagem").src = "img/menos.png";
  document.getElementById("imagem").alt = "menos.png";
  }
  else {
  document.getElementById("imagem").src = "img/mais.png";
  document.getElementById("imagem").alt = "mais.png";
    }
}

function troca2(obj){
  if(obj.alt == "mais2.png"){
  document.getElementById("imagem2").src = "img/menos.png";
  document.getElementById("imagem2").alt = "menos2.png";
  }
  else {
  document.getElementById("imagem2").src = "img/mais.png";
  document.getElementById("imagem2").alt = "mais2.png";
    }
}

<img id="imagem" src="img/mais.png" alt="mais.png" border="0" onclick="troca(imagem)" style="cursor:pointer;" />

<img id="imagem2" src="img/mais.png" alt="mais2.png" border="0" onclick="troca2(imagem2)" style="cursor:pointer;" />

solução caseira mas funciona.

PS. nao entendo nada de js, apenas usei a lógica

William Bruno · Maio 14, 2010

Perfeito cara! programar é isso mesmo...

apenas modificando um pouco:

<script type="text/javascript">
var mais = 'mais.jpg';
var menos = 'menos.jpg';


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 id="imagem2" src="mais.jpg" alt="mais.jpg" border="0" onclick="troca( this, 'imagem' )" style="cursor:pointer;" />
<img id="imagem" src="menos.jpg" alt="menos.jpg" border="0" onclick="troca( this, 'imagem2' )" style="cursor:pointer;" />

acabei voltando pra sua primeira solução... qual era o problema dela?

Raytwo · Maio 14, 2010

é que na minha situação eu utilizo o onclick em uma div e na imagem, quando clicar na div mude a imagem tambem

<div class="moldura" onclick="MM_effectBlind('a1', 500, '30px', '180px', true)">
  <div class="amplia2" id="a1" onclick="troca01(imagem01)">
    <img id="imagem01" src="img/mais.png" alt="mais01.png" border="0" onclick="troca01" style="cursor:pointer;"/></spam>
    </div>
</div>

tirei o (imagem01) do img pq sem ele tb funciona, n sei pq

na outra forma como não entendi direito a lógica acredito que não soube programar e acontecia de clicar e nao mudar a imagem ou so mudava a imagem depois do 3 clique

William Bruno · Maio 14, 2010

Você pode aplicar 2 ou mais funções em um mesmo evento, de um mesmo elemento:

onclick="funcao1(); alert('ae'); outra();"

...

Arquivado

[Resolvido] Trocar de imagem quando clicar

Recommended Posts

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Müller 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gralha 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raytwo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante