Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gmps

marcar palavra

Por , em Desenvolvimento frontend

Recommended Posts

gmps    0

gmps
Postado

Galera, eu tenho várias palavras em uma linha, como que eu faço para que quando clicar em alguma deles, ficar marcada a que eu cliquei?!?!=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

você tá falando isso no site?Com css eu não conheço jeito, talvez se você falar co o pessoal de JS consiga resolver![]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Olá, GMPS!

 

O que você quer fazer é JavaScript mesmo, pois as pseudo-classes da tag A são:

 

a:link {color: #FF0000}	 /* link não visitado */a:visited {color: #00FF00}  /* link visitado */a:hover {color: #FF00FF}   /* mouse over sobre link */a:active {color: #0000FF}   /* link ativo */
Só que a partir do momento que você visitou um link a pseudo-classe a:visited, se definida, vai se sobrepor a qualquer outra (estilos sempre em cascata, lembre-se disso!), a menos que você se utilize de alguns pequenos hacks.

 

Porém, o que você está querendo fazer é um pouco mais complicado, você quer que as palavras clicadas fiquem com marcações diferentes, só em JavaScript mesmo (e não é algo super fácil para iniciantes, a menos que ache um pronto com tutorial e afins).

 

Pra você aprender JavaScript, acho que o ideal mesmo é ir lá no W3Schools, tem um tutorial bem legal e fácil (também pode fuçar no fórum de JavaScript pra ver se o pessoal te dá uma mão). Agora, se quiser pesquisar mais específico (se você sabe algo), nesse tutorial aqui acho que dá pra você também aprender algo.

 

Copia esse HTML e testa por aí, o raciocinio parte daí, mas é bem mais complexo o script mesmo, pois você vai ter que identificar as palavras. É algo simples de fazer, mas que exige um tempinho de dedicação e um bom conhecimento de programação e de Javascript, pede ajuda pro pessoal lá!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste de JavaScript</title>
<script language="javascript" type="text/javascript">
<!--
Object.prototype.underline = function() {
var myStyle = this.style;
if (myStyle.textDecoration == 'underline') {
	myStyle.textDecoration = 'none';
} else {
	myStyle.textDecoration = 'underline';
}
}
Object.prototype.cssclear = function() {
this.style.textDecoration='none';
}
//-->
</script>
<style type="text/css">
<!--
.dedinho {
cursor: pointer;
}
-->
</style>
</head>
<body>
<p class="dedinho" onclick="underline();">teste de onClick - você precisa clicar <strong>uma</strong> vez 
para aparecer o UNDERLINE, se já estiver de UNDERLINE clique para tirar</p>
<p>Aqui é igual acima, mas você tem clicar em <span class="dedinho" onclick="underline();">COELHO</span> para aparecer o UNDERLINE somente na palavra <span class="dedinho" onclick="underline();">COELHO</span>.</p>
</body>
</html>

 

Explicando: quando você clica no parágrafo com o ONCLICK você vai fazer o JavaScript definir o CSS text-decoration: underline; para ele.

 

Em seguida ele testa para ver se já está definido o text-decoration: underline; e, caso esse estilo já esteja lá, ele define um text-decoration: none; para a TAG.

 

Você pode usar isso para qualquer TAG que suporte o atributo ONCLICK e também pode usar isso para o ONMOUSEOVER, ONMOUSEOUT, ONDBLCLICK e demais ações de mouse/teclado - de acordo com sua necessidade.

 

Aproveite para ver que neste caso fazer uma classe em CSS para aparecer o dedo indicando que o lugar é "clicável" é não só um efeito bonitinho como também necessário para que o usuário de seu site saiba que lá é um lugar que vai executar alguma ação de ONCLICK. ;) Este tópico até completa o que pergunta sobre a ação de mouse em CSS.

 

Isso é um exemplo de CSS + JavaScript aplicados para melhorar a navegabilidade do seu site! :D

 

Frescura é legal? É, sim senhor, mas frescura que adicione é o que vale profissionalmente (igual as "frescuras" novas do Fórum Imasters, que ficaram f***!!!). ;)

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito