Jump to content


Photo

Javascript Com Css


  • Faça o login para participar
7 replies to this topic

#1 kuserun

kuserun

    Turista

  • Usuários
  • 43 posts
  • Sexo:Masculino

Posted 12/04/2009, 21:08

Eu estou montando um site e estou precisando de um modo que a cor de fundo de um box do CSS mude quando o mouse passa em cima, então pensei em usar onmouseover do java, mas não sei como ir para frente. Gostaria que me explicassem como eu poderia implantar este sistema de que quandio a pessoa pussesse o mouse EM CIMA do box ele mudasse para a cor e para o conteúdo que eu quisesse.


Agradeço desde já

Edição feita por: kuserun, 14/04/2009, 13:44.


#2 Feko

Feko

    Normal

  • Usuários
  • 87 posts
  • Sexo:Não informado
  • Localidade:Balneário Camboriú - SC

Posted 14/04/2009, 15:00

Tente da seguinte manira....

onmouseover="this.style.backgroundColor='#FF0000';"

Edição feita por: Feko, 14/04/2009, 17:03.


#3 kuserun

kuserun

    Turista

  • Usuários
  • 43 posts
  • Sexo:Masculino

Posted 14/04/2009, 15:40

<html>
<script type="text/javascript">
function piscar()
{
this.style.background-color='#224466';
}
function piscar2()
{
this.style.background-color='#553322';
}
</script>
<head>
<style type="text/css" media="screen">
#box1 {
background-color: #336677;
position: absolute;
top: 300px;
left: 10px;
width: 200px;
onmouseover="piscar()"
onmouseout="piscar2()"
}
</style>
</head>
<body>
<div id="box1">
<h1 align=center>1</h1>
</body>
</html>


Eu fiz o que você disse, mas não está dando certo. Peço que por favor de uma olhada no código para ver se há algo errado e, caso haja, peço que por favor me mostre meu erro.
Agradeço pela ajuda

#4 DarkSign

DarkSign

    Doutor

  • Usuários
  • 868 posts
  • Sexo:Masculino
  • Localidade:Brasil
  • Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 14/04/2009, 16:11

O erro está nesse parte

<script type="text/javascript">
function piscar()
{
this.style.background-color='#224466';
}
function piscar2()
{
this.style.background-color='#553322';
}
</script>

A diretiva this só serve pra referenciar o próprio elemento, então não funcionará em funções.

Você tem que substituir o this pela expressão DOM correspondende do elemento, no caso

document.box1.style.background-color='#553322';

Entendeu?

/*DarkSign*/
Não sabe por onde começar? Que tal pelas Regras ?

#5 Feko

Feko

    Normal

  • Usuários
  • 87 posts
  • Sexo:Não informado
  • Localidade:Balneário Camboriú - SC

Posted 14/04/2009, 17:02

Essa linha que te passei não era pra ser colocada dentro da propiedade do CSS, mas no item.
<div id="box1" onmouseover="this.style.backgroundColor='#FF0000';"></div>

E posso estar enganado, mas até onde eu saiba, mudar a cor de fundo com JS a sintaxe é backgroundColor. background-color é valido apenas para CSS.

Edição feita por: Feko, 14/04/2009, 17:03.


#6 DarkSign

DarkSign

    Doutor

  • Usuários
  • 868 posts
  • Sexo:Masculino
  • Localidade:Brasil
  • Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 14/04/2009, 17:07

@Feko: correto, cara, tinha me esquecido disso.

Confira todas as referencias CSS para JS nessa tabela >>> CSS X JS

/*DarkSign*/
Não sabe por onde começar? Que tal pelas Regras ?

#7 kuserun

kuserun

    Turista

  • Usuários
  • 43 posts
  • Sexo:Masculino

Posted 14/04/2009, 17:22

Galera, valeu!!!!!!!!!!!!!!!!!!!!!!!!!!
Deu certo aqui! Mas estou com um problema, o box está mudando de cor, mas não consigo por nenhum conteúdo dentro dele, o número "1" no caso não aparece dentro do box e sim, fora. Peço que por favor me expliquem meu erro, agradeço muito pela grandiosa ajuda até agora.

O código está a seguir:
<html>
<head>
<style type="text/css" media="screen">
#box1 {
background-color:red;
position: absolute;
top: 300px;
left: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="box1" onmouseover="this.style.backgroundColor='#224466'" onmouseout="this.style.backgroundColor='#553322'"></div>
<h1 align=center>1</h1>
</body>
</html>




EDITADO: Caramba.... Acabei de achar meu erro, desculpa ae
<html>
<head>
<style type="text/css" media="screen">
#box1 {
background-color:red;
position: absolute;
top: 300px;
left: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="box1" onmouseover="this.style.backgroundColor='#224466'" onmouseout="this.style.backgroundColor='#553322'"> </div>
<h1 align=center>1</h1>
</body>
</html>


Desculpa, pelo erro aí. Acabaram as dúvida. Muito obrigado pessoal! Vlw ae pela grande ajuda

Edição feita por: kuserun, 14/04/2009, 17:28.


#8 DarkSign

DarkSign

    Doutor

  • Usuários
  • 868 posts
  • Sexo:Masculino
  • Localidade:Brasil
  • Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 15/04/2009, 09:51

Hahaha, correto, esse é o erro.
Seria interessante postar que a tag deveria estar embaixo, e seria legal vc colocar as tags [ code ] e [/ code ] ao seu código.

Mais dúvidas, volte a postar.

/*DarkSign*/
Não sabe por onde começar? Que tal pelas Regras ?




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq