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

OBS:: Desculpe, postei nessa sessão e não tinha lido que não valia para Javascript

Editado Dezembro 19, 2011 por ArthurTrabalho