6 replies to this topic

[JurisCode]

utilizando o Class ID fica assim

<style type="text/css">
<!--
classe {text-decoration: none}
classe:hover {text-decoration: underline; color: #FF0000;}
-->
</style>

daí eu jogo na class ID

<div class="classe"> ou mais ou menos isso.

ocorre que eu queria jogar isso dentro do style

<div style="text-decoration: none" + hover???>

como que eu coloco o hover dentro da tag?

[Édipo Costa Rebouças]

utilizando o Class ID fica assim

<style type="text/css">
<!--
classe {text-decoration: none}
classe:hover {text-decoration: underline; color: #FF0000;}
-->
</style>

daí eu jogo na class ID

<div class="classe"> ou mais ou menos isso.

ocorre que eu queria jogar isso dentro do style

<div style="text-decoration: none" + hover???>

como que eu coloco o hover dentro da tag?

javascript...

para varias propriedades(serve só pra uma tb)
<div style="text-decoration: none" onmouseover=" with(this.style){color='#FFFFFF'; textDecoration='underline'; }">

só pra uma(mas serve para varias também, mas toda hora você tera que repetir this.style.propriedade="valor")
<div style="text-decoration: none" onmouseover=" this.style.color='#FFFFFF';" >

endereço com propriedades css em java script: http://codepunk.hard...g.uk/css2js.htm

, mas sinceramente, recomendo que você faça tudo isso em arquivos sepados com css puro mesmo.

Edição feita por: Édipo Costa Rebouças, 25/07/2008, 00:31.

[JurisCode]

não apenas esclareceu minha dúvida, como também me ensinou a trabalhar com o javascript + style shit, digo, sheet...


valeu. funcionou tudo

<div style="BACKGROUND: url(images/BGIMG.jpg) no-repeat; FLOAT: left; WIDTH: 74px; HEIGHT: 61px" onmouseover=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; styleFloat='left'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='50%' }" onmouseout=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='top left' }">aqui muda</div>

É UMA IMAGEM que seria a parte de cima a imagem sem a ativação e na parte de baixo ela ativada, com outra cor. daí quando passa o mouse por cima apenas reposiciona o BACKGROUNDIMAGE e parece que é outra imagem.

Vai ficar um codigo quilométrico, mas prefiro fazer assim pq não precisa ficar se perdendo num emaranhado de arquivos e num labirinto de codigos.

daí fazendo marcações

<!-- Menu de cima começa aqui-->

<!-- Menu de cima termina aqui-->

fica mais fácil, muito embora o desempenho caia um pouco.

[Édipo Costa Rebouças]

não apenas esclareceu minha dúvida, como também me ensinou a trabalhar com o javascript + style shit, digo, sheet...


valeu. funcionou tudo

<div style="BACKGROUND: url(images/BGIMG.jpg) no-repeat; FLOAT: left; WIDTH: 74px; HEIGHT: 61px" onmouseover=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; styleFloat='left'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='50%' }" onmouseout=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='top left' }">aqui muda</div>

É UMA IMAGEM que seria a parte de cima a imagem sem a ativação e na parte de baixo ela ativada, com outra cor. daí quando passa o mouse por cima apenas reposiciona o BACKGROUNDIMAGE e parece que é outra imagem.

Vai ficar um codigo quilométrico, mas prefiro fazer assim pq não precisa ficar se perdendo num emaranhado de arquivos e num labirinto de codigos.

daí fazendo marcações

<!-- Menu de cima começa aqui-->

<!-- Menu de cima termina aqui-->

fica mais fácil, muito embora o desempenho caia um pouco.

cara, faz separado na folha, o objetivo de se usar css é separar a estilização da estrura, logo se vc quiser mudar o título de todas as suas 90 páginas pra vermelho vc só muda uma folha de estilo, uma linha, e não paginas, fora que o codigo fica mais pesado.

Edição feita por: Édipo Costa Rebouças, 25/07/2008, 15:38.

[JurisCode]

vou fazer programação em asp, daí eu uso includes

vai ser o mesmo menu para o site todo

assim, quem ver o asp gerado na navegador vai ver uma inhaca de códigos, mas a font asp vai ser bem mas palatável

Edição feita por: JurisCode, 25/07/2008, 15:42.

[Édipo Costa Rebouças]

vou fazer programação em asp, daí eu uso includes

vai ser o mesmo menu para o site todo

assim, quem ver o asp gerado na navegador vai ver uma inhaca de códigos, mas a font asp vai ser bem mas palatável

Então cara, eu faço isso com PHP, acredita cara, é melhor solução quase sempre é o css, nesse caso em especifico, o css não tem como tratar tais eventos, mas sempre que puder utilize o css com a folha separada, você pode usar varias folhas cara, para estilizar a sua pagina, uma pro header , outra pro content e ai vai, fora que se vc usar nomes que seguinifiquem algo pra vc fica bem mais facil, é só pesquisar no css.

Pro seu css ficar pequeno e util, vc tem que aprender a deixar ele mais geral, por exemplo, o que eu uso para hovers é o seguinte:

.bot{
display:block;
text-indent:-9999px;
background-repeat:no-repeat;
}


.bot:hover{
background-position:0 -30px;
}

ai, todas as imagem que faço hover crio o a imagem do botão e o hover na mesma imagem, posicionando a parte do hover a 30px abaixo do top da imagem, com isso, ganho um efeito muito bom aplicando somente isto aqui ó

<a href="http://www.google.com" class="bot google"title="Google">Google</a>

a unica coisa a mais que escrevo na folha de estiloé isso:

a.google{

background-image: url();
height: px;
width:px;

}

Edição feita por: Édipo Costa Rebouças, 25/07/2008, 16:09.

[bimonti]

Só uma observação, o with do javascript tem um impacto grande na performance do site. Seria melhor trocar a classe inteira ao invés de adicionar várias propriedades:

onmouseover="this.className = 'classe'"