Esta matéria é um empurrão para
que não seja preciso usar javascripts e nem trabalhar com
includes ou iframes, caso o objetivo seja apenas deixar os
links com efeitos diferentes.
Essa dica interessa também aos desenvolvedores
destas mesmas linguagens, já que se trata apenas de folha
de estilos (CSS). Você sabe como fazer dois links usarem diferentes
estilos de “a:hover”(Quando o mouse está em cima de um link)?
Gostaria de lembrar que os procedimentos foram feitos no Dreamweaver
4, e por isso vou me basear nele para dar os passos.
1. Abra ou Crie um novo arquivo HTML.
2. Deixe todas as cores dos diferentes
tipos de link (Active Links, Visited Links e Links) sem nenhuma
cor nas propriedades da página criada ou aberta.
3. Crie uma folha de estilos e defina
os CSS Selectors (a:active, a:link, a:visited e a:hover) da
maneira que quiser, sempre lembrando em mudar apenas o “a:hover”,
que é o efeito do mouse em cima do link. O resto dos Selectors
deixe exatamente um igual ao outro. Redefina a TAG “A” também,
por que senão esses CSS Selectors não irão funcionar corretamente.
Até aí tudo bem: Uma folha de estilos criada.
Quando linkar algum texto e visualizar no browser, o efeito
do mouse aparece. Que lindo!!
Agora vem a etapa que confunde um pouco. É
a etapa da mágica.
1. Dentro da folha de estilos, crie
um Custom Style(“class”) e o edite da forma que quiser. Nomeie-o
de “estilo”, só para facilitar a explicação. Você pode nomeá-lo
como quiser, sempre deixando o ponto na frente.
2. Agora crie um novo CSS Selector,
mudando apenas um parâmetro. Quando escolher o Selector(Ex.:
a:active), ao invés de colocá-lo como aparece na caixinha,
coloque como a.estilo:active(Você tem a opção de digitar o
nome do Selector). Pronto, está definido um estilo de link
para aquele “class” que criou! Não esqueça que isso tudo é
definido dentro da Folha de estilos criada.
3. Os estilos para este “class” ficarão
assim:
»
a.estilo:link – Decoração do link daquele class criado
(.estilo)
»
a.estilo:active – Decoração do link (do class criado)
quando ele estiver sendo clicado.
»
a.estilo:visited – Decoração do link(do class criado)
quando o link já tiver sido visitado.
»
a.estilo:hover – Decoração do link(do class criado) quando
o mouse passar por cima dele.
Agora que os dois estilos estão definidos,
basta inseri-los na página. Digite uma palavra e crie um link
nela. A palavra vai assumir os critérios que você definiu
nos CSS Selectors normais certo?
Agora digite uma outra palavra e coloque um
link nela. Selecione a bendita palavra linkada e aplique o
class que criou (.estilo)!
Quando você passar o mouse nas palavras, elas terão efeitos
diferentes.
Advertência: Cuidado quando for
selecionar a palavra linkada, é possível que selecione outra
TAG além da “A”. É por isso que recomendo, nessas etapas,
selecionar o link no modo de visualização de códigos, assim
ficando: class=”estilo”>
Palavra Digitada
Selecione apenas essa área, caso o contrário
você não estará colocando diferentes efeitos e sim vários,