Logo Hardware.com.br
jc_alucard
jc_alucard Novo Membro Registrado
14 Mensagens 0 Curtidas

[Resolvido] Dúvidas com Javascript e CSS

#1 Por jc_alucard 06/03/2014 - 07:08
Bom dia,

preciso transferir o código abaixo, para os seguintes arquivos wp-content.js e style.css, para ter um código mais legível e agrupar as demais funções .js do site.

O problema que eu tenho atualmente é que não sei como chamar a função "mOver(this)" quando separo o código em arquivos.

como eu passaria essas 2 divs dentro do style.css? E como eu chamaria elas?

obs. o código encontra-se no:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover


<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>
RenanDecarlo
RenanDecarlo General de Pijama Registrado
2.8K Mensagens 185 Curtidas
#7 Por RenanDecarlo
07/03/2014 - 05:49
jc_alucard disse:


Sim, você continua chamando a função dentro da div. Há outras maneiras de se fazer sem ter que usar o onmouseover e onmouseout, por exemplo, mas é mais complexo. Tem que criar um handler pra "escutar" o evento e ficar de olho no elemento (div), até ser acionado, e chamar certa função. Mas isso é mais fácil de se fazer quando usa-se uma biblioteca tipo jQuery.

O .css e o .js ficam do jeito que o logicalkid disse. O HTML ficaria assim:

<html>
<head>
<link rel="stylesheet" type="text/css" href="arquivo.css">

</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
</body>
</html>
No seu código a chamada deve ficar diretamente no head, caso contrário o usuário iria passar o mouse em cima da div e nada aconteceria, até o script carregar.

Antigamente a chamada do script .js era feita no final do body quando não precisava-se usar o script imediatamente. Assim o .js era carregado apenas após o carregamento inteiro do body.
Hoje, fazemos o mesmo usando o carregamento assíncrono no head, usando o atributo "async" (existem alguns outros métodos para compatibilidade com mais browsers, como o Google Analytics por exemplo faz).


Lembrando que é bom adicionar uma classe à div, caso queira o estilo somente nela.

51l3n7 disse:


O melhor jeito de se fazer é separar em arquivos, assim o navegador consegue criar um cache do .js e do .css e consequentemente vai diminuir o tempo de carregamento das páginas.
Samsung ATIV Book 3 frown.png
jc_alucard
jc_alucard Novo Membro Registrado
14 Mensagens 0 Curtidas
#8 Por jc_alucard
07/03/2014 - 06:52
Bom dia,
era isso que faltava mesmo, vlww

Mouse Over Me
Só tem um porém.

Tipo eu não consegui colocar as duas funções dentro do wp-content.js já existente na template, eu tive que criar outro só pra essas duas funções.

ficou: wp-content.js e hover.js e chamei os dois arquivos no head.

Tem como eu usar as variáveis do wp-content.js dentro do hover.js, como se elas fossem variáveis globais?
© 1999-2025 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal