Ir ao conteúdo
  • Cadastre-se

Menu com uma imagem diferente em cada link ativo


Ir à solução Resolvido por Thavi Lang,

Posts recomendados

Tenho um menu composto somente de imagens, onde ele normal é com uma imagem, com o mouse em cima outra, e com o link ativo outra, mas até agr não consegui achar um jeito de fazer com que o link ativo tenha uma imagem diferente, pois cada item do menu é uma imagem diferente do item anterior, o que me impede de usar a:active, e o onclick não funciona. Se alguém conseguisse me ajudar... esse é o código do meu menu:

 

<ul id="menu">     <li><a href="#" name="pic" class="acao1" title="link1">         <img src="img/menu/menuverde1.png" onMouseOver="this.src='img/menu/menubranco1.png'" onMouseOut="this.src='img/menu/menuverde1.png'" width="100%"/>        </a></li>        <li><a href="#" name="pic" class="acao2" title="link2">         <img src="img/menu/menuverde2.png" onMouseOver="this.src='img/menu/menubranco2.png'" onMouseOut="this.src='img/menu/menuverde2.png'" width="100%"/>        </a></li>        <li><a href="#" name="pic" class="acao3" title="link3">         <img src="img/menu/menuverde3.png" onMouseOver="this.src='img/menu/menubranco3.png'" onMouseOut="this.src='img/menu/menuverde3.png'" width="100%"/>        </a></li>        <li><a href="#" name="pic" class="acao4" title="link4">         <img src="img/menu/menuverde4.png" onMouseOver="this.src='img/menu/menubranco4.png'" onMouseOut="this.src='img/menu/menuverde4.png'" width="100%"/>        </a></li>        <li><a href="#" name="pic" class="acao6" title="link6">         <img src="img/menu/menuverde6.png" onMouseOver="this.src='img/menu/menubranco6.png'" onMouseOut="this.src='img/menu/menuverde6.png'" width="100%"/>        </a></li>        <li><a href="#" name="pic" class="acao5" title="link5">         <img src="img/menu/menuverde5.png" onMouseOver="this.src='img/menu/menubranco5.png'" onMouseOut="this.src='img/menu/menuverde5.png'" width="100%"/>        </a></li></ul>
Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá,

 

Primeiramente bem vindo ao fórum.

Existe uma técnica CSS chamada CSS SPRITE.

 

Com ela você pode definir os 3 estados do link setando as imagens no css para cada estado do link, ou seja...  Normal,  hover e depois de clicado.(active)

 

As sprites você faz em um programa qualquer  como o photoshop ou até mesmo o paint do windows... 

 

Veja um exemplo simples do uso:

http://jsfiddle.net/8Lmvhkqy/

 

Estude ele e adapte para seu objetivo.

 

Leituras adicionais:

http://www.infowester.com/menu_css_sprit.php

http://tableless.com.br/css-sprites/

Link para o comentário
Compartilhar em outros sites

Oi... obrigada.

Entendi a teoria dos splits com uma imagem só... mas eu posso usar o mesmo tipo de código com várias imagens diferentes, não posso? Eu tentei usar o split com uma imagem só mas não deu muito certo, e eu tenho prazo pra terminar isso, então tentei usar o mesmo esquema de #id .classe, limpando os códigos dos links e colocando tudo nesse esquema, mas o active insiste em não funcionar... :s

Link para o comentário
Compartilhar em outros sites

  • Moderador

Entendi a teoria dos splits com uma imagem só... mas eu posso usar o mesmo tipo de código com várias imagens diferentes, não posso? 

Uma correção: é "Sprites" e não "splits"  rsrs :)

 

Então, sim você pode e deve utilizar a estrutura css com várias imagens diferentes...  Para facilitar sua vida, procure deixar as imagens na mesma proporção... assim você pode utilizar o css para as imagens sem ter que ajustar a posição do background image.

 

Uma coisa básica que você precisa lembrar sempre é que #id é único e .classe é reutilizável.

Logo, se você utilizar dois IDs iguais em elementos diferentes.. vai dar conflito e o resultado não será como o esperado. Por isso dê prioridade para .classe se for o elemento LI.

 

Tome este exemplo como adicional do anterior do post #2

 

Estrutura html:

<ul>     <a href="#"class="link1 ">          <li>                        </li>      </a>     <a href="#"class="link2">         <li>                      </li>    </a></ul>     

CSS:

a.link1 {    text-decoration: none;    display: block;    text-indent: -5000px;    width: 136px;    height: 42px;    background-image: url(img/image.png);    background-repeat: no-repeat;} a.link1 {background-position: 0 0;} a.link1:hover {background-position: 0 -41px;} a.link1:active {background-position: 0 -83px;}a.link2 {    text-decoration: none;    display: block;    text-indent: -5000px;    width: 136px;    height: 42px;    background-image: url(img/image2.png);    background-repeat: no-repeat;} a.link2 {background-position: 0 0;} a.link2:hover {background-position: 0 -41px;} a.link2:active {background-position: 0 -83px;} 

Perceba que na estrutura da lista não ordenada, em cada elemento LI, foi utilizado uma classe diferente,  e estas classes são quase idênticas, apenas substituindo a imagem de background.. Lembrando que as imagens teriam a mesma proporção.

 

Daria para fazer com uma imagem apenas..  eaí ajustando a posição..  particularmente prefiro quanto menos imagem melhor.. mas as vezes não tem jeito.. rsrs

 

Obs: Fazendo deste modo, você elimina o uso do javascript.. assim deixando seu código mais limpo!

Link para o comentário
Compartilhar em outros sites

Não está dando certo... minha página não é exatamente uma página, são várias divs que quando têm o link raiz acionado aparecem ou se escondem, eu só tenho o index como página efetiva... o menu é esse http://testesimbiota.url.ph/ (tá bem embaixo na página) o primeiro link é o do código abaixo e nos outros é o código que eu postei inicialmente, é pra imagem ser branca quando ativa :S

a.link1 {background-position: 0 -100px;}a.link1:visited {background-position: 0 0;}a.link1:hover {background-position: 0 0;}a.link1:active {background-position: 0 0;}
Link para o comentário
Compartilhar em outros sites

  • Moderador

Entendi agora o que você queria fazer. O terceiro estado,  que tinha sugerido era para destacar qual link você estava clicando.  Mas seu objetivo é destacar o link atual certo?

 

Nesse caso teremos que utilizar jQuery para facilitar a vida:

 

exemplo:

Estrutura:
<ul>        <li><a href="#" class="link"></a></li>      <li><a href="#aba" class="link"></a></li>    <li><a href="#abb" class="link"></a></li>    <li><a href="#abc" class="link"></a></li>    <li><a href="#abd" class="link"></a></li></ul>

 

CSS:

ul{ list-style: none;}ul li a{  text-decoration: none;    display: block;    text-indent: -5000px;    width: 136px;    height: 42px;    background-image: url(http://www.tickimg.com.br/uploads/_btn.png);    background-repeat: no-repeat;} a.link:hover {background-position: 0 -41px;}ul li.ativo a{ background-position: 0 -83px;}

jQuery:

$(document).ready(function(){$('ul li a').on('click', function(){    $(this).parent().addClass('ativo').siblings().removeClass('ativo');  });});

Veja funcionando

 

Ps: Use a versão mais recente do jQuery (2.1.1)

Ps2: clique no link da imagem de background e veja que a imagem possui os 3 estados juntos. fazendo assim você economiza tempo de carregamento.. como você tem 6 links no seu  menu, você teria que ter 6 linhas com um grupo de 3 (se os estados forem diferentes).. se o estado normal for o mesmo do estado ativo.. aí você coloca as imagens em 6 linhas de duas em duas..

 

Para entender o código jQuery, recomendo que você estude um pouco sobre as funções parent(), addClass(), removeClass() e siblings() todos possuem documentação oficial no site do jQuery( em inglês)

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...