problemas para fazer OVER em botão ....

[publicitando 0]

Pessoal ... procurei no forum mas só achei overs via background ...

 

como eu faço pra colocar o over direto na imagem, igual qdo fazemos com javascript ??

 

As imagens:

 

Status normal:

 

http://www.hkl.com.br/eagle/images/b_sports.gif

 

Status over:

 

http://www.hkl.com.br/eagle/images/b_sports_ov.gif

 

Valeu de novo ... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Maujor 144]

Não achou porque não há como fazer rollover de imagem em CSS sem uso de background.

[publicitando 0]

poxa ... nesse caso entao vou ter q ficar com JS mesmo por causa da fonte utilizada no menu ... nao vai dar pra substituir por texto puro ....

[pa_bruno 0]

e pq você naum coloca como background entaum?

[publicitando 0]

mas ai eu teria q fazer uma classe pra cada botão ou estou errado?exemplo:#botao1 { nononoooono}#botao1:hover { nononono}#botao2 { nononoooono}#botao2:hover { nononono}#botao3 { nononoooono}#botao3:hover { nononono}No caso de menu com texto, seria apenas uma classe pra controlar o over de background de todos né e o link no texto todos né?não sei se fui bem claro, sou meio complicado pra expressar minhas duvidas rs

[MaRaCa 0]

Tente o seguinte

<div id="botao"><a href="#">Sports</a></div>

No CSS você faz o seguinte:

#botao {text-indent: -9000px;overflow: hidden;display:block;width: 112px; /* largura da imagem */height: 38px; /* altura da imagem */}#botao a {width: 112px; /* largura da imagem */height: 38px; /* altura da imagem */background-image: url(http://www.hkl.com.br/eagle/images/b_sports.gif);background-repeat: no-repeat;display:block;}#botao a:hover {width: 112px; /* largura da imagem */height: 38px; /* altura da imagem */background-image: url(http://www.hkl.com.br/eagle/images/b_sports_ov.gif);background-repeat: no-repeat;}

Qualquer dúvida posta ai :)

[Maujor 144]

Tutorial: Menu com rollover de imagem

[pa_bruno 0]

boa maurício... pessoal continua naum buscando, etc... <_<

[pa_bruno 0]

pra economizar:

a.imglink {background: url(images/search_submit.gif) no-repeat;height: 20px;width: 52px;border: 0;margin-left: 2px;text-indent: -9999px;cursor: pointer;}a.imglink:hover {background: url(images/search_submit.gif) no-repeat 0 -20px;}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif