Ir para conteúdo
Fórum Script Brasil
  • 0

Como Alterar Imagem com Click [CSS+Javascript]


ArthurTrabalho

Pergunta

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 por ArthurTrabalho
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...