Como Alterar Imagem com Click [CSS+Javascript]

[ArthurTrabalho]

Boa tarde amigos,

Estou com uma dificuldade imensa numa página aqui no Trabalho.

Desenvolvemos uma nova página pra sessão Download, usando nas Divs o display none.

Então, quando você clicasse em um dos Links de sua escolha, abria uma div abaixo do link com as informações para Download, se clicasse novamente, fechava essa Div.

Nesse menu que "(ul, li)", definimos no CSS uma Seta azul pra ele.

Entretanto gostariamos de mudar a seta para algo que mostrasse que iria expandir, que mudasse essa figura.

Aplicamos no CSS o a:visited

Entretando ela não retorna a Seta azul (inicial) quando clica novamente.

Pensamos em fazer via javascript, talvez aproveitar a função que já criamos para abrir os Divs, só que não estamos conseguindo.

O problema é que o site tem que ser acessível, não podemos colocar .jpg no código fonte, somente via CSS, pois caso contrário teremos que definir as imagens e monte de coisa ....

Passarei o código aqui, pois não tem como da upload (estou no trabalho)

Inicio da parte em que eu falei

Código Fonte

<ul id="ListaDropDown">
          <li><a href="java script:mostraDetalhes('abraModulo');" ><strong>Módulo de Segurança Banestes</strong></a></li>
        </ul>
        <div id="abraModulo" style="display:none">
          <p>Dispositivo de proteção que, durante a realização de suas transações eletrônicas no <span lang="en" xml:lang="en">Internet Banking</span>, atua como uma "blindagem" em seu computador, protegendo-o contra ataques de programas maliciosos.</p>
          <ul id="ListaDropDown_sub">
            <li><a href="http://www.banestes.com.br/seguranca/index_modulo.htm">Saiba mais sobre o módulo.</a></li>
          </ul>
          <div id="NotasExplicativas" class="margem20">
            <p><strong>Módulo de Segurança Banestes </strong></p>
            <p><strong>Tipo de Arquivo:</strong> Executável (.exe)</p>
            <p><strong>Tamanho:</strong> 5,93 MB</p>
            <p>
              <input name="download" type="button" id="download" onclick="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" onkeypress="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" value="Download do Módulo" />
            </p>
          </div>
        </div>
        <!-- fecha div abraModulo -->

CSS

#ListaDropDown{
    display:block;
    clear:both;
    margin:5px 0px;
    list-style-type:none;
}
            #ListaDropDown_sub{
            display:block;
            clear:both;
            margin:5px 0px 0px 20px;
            list-style-type:none;
    
            }
            
            .margem20 p{
                margin-left:30px;
                
            }
            
                        
            
            #ListaDropDown_sub ListaNumerada p{
            margin:5px 0px 0px 20px;
            
            }
            
            
            #ListaDropDown_sub li {
            font-size:0.83em;
            display:block;
            margin:0.2em 5px;
            list-style-type:none;
            
        
            }
            #ListaDropDown_sub  li a {
            display:block;
            background:url('img/seta_up.png') no-repeat;
            margin:0px;
            padding:4px 0px 5px 25px;
            *padding:2px 0px 5px 25px;
            color:#666;
             
        }
                
        
        
        



#ListaDropDown li {
    font-size:0.83em;
    display:block;
    margin:0.2em 5px;
    list-style-type:none;
}
#ListaDropDown li a {
    display:block;
    background:url('http://www.banestes.com.br/img/seta.png') no-repeat;
    margin:0px;
    padding:4px 0px 5px 25px;
 *padding:2px 0px 5px 25px;
}
#ListaDropDown li a:hover {
    display:block;
    background: url('http://www.banestes.com.br/img/seta_on.png') no-repeat;
    margin:0px;
    padding:4px 0px 5px 25px;
 *padding:2px 0px 5px 25px;
}

Javascript que abre e fecha as Divs

function mostraDetalhes(c){
    if (document.getElementById(c).style.display == 'none'){
        document.getElementById(c).style.display = '';        
    }
    else {
        document.getElementById(c).style.display = 'none';
    }
}

A seta http://www.banestes.com.br/img/seta.png

[Fernando Sousa]

Deixa ver se eu entedi.Você quer que ao clicar sobre um link abaixo aparece outra coisa(imagem,texto,etc.) e a seta fique mais ou menos assim :

=> (normal)

||

V (quando clicar no link que fica ao lado,e após o evento aparece um elemento abaixo.)

Bem você pode criar no HTML um <span id="id-x">antes do link e no css definir seu tamanho(width e height) bordas ou não e seu background normal (no caso a seta.png) .

Para o background mudar quando o link for clicado utilize algo assim:

a:hover #id-x{background:url(...............)}

Entendeu?

O novo background vai ser a nova seta (desta vez apontada para baixo)

Fui,espero ter ajudado.

[Fernando Sousa]

^_^ :( :blink: :unsure: eu ia editar uma resposta rapidamente,pois estou com sono -_- ,mas como vi que o problema é mais complexo , pelo menos para mim:gosto de ser perfeccionista , vi que iria demorar horas e por isso desisti.

Desculpe.

Editado Dezembro 21, 2011 por Fernando Sousa

[ArthurTrabalho]

É.. esse do background não funcionou

Mas a ideia é essa Fernando

A seta está assim ==>

Quando clicar no link e abrir o div com as informações abaixo

a Seta vai mudar para

||

||

\/

Só que não sei como realizar isso.

[vini_loock]

Faz assim...

Usa em todas as lis um background com a seta assim: ->

Ai cria uma regra para as lis com a classe active, nessa regra você muda o background e coloca a outra seta.

No javaascript, ao clicar em uma li, você verifica se esse li tem a classe 'active', se tiver, você retira e se não tiver você adiciona