Simplificar código

[eng442 0]

Olá, sou novo no iMasters e com HTML.

 

Gostaria de saber se há uma maneira de simplificar este código que se repete em duas linhas:

 

<img src="img/m_abaixado.png" id="home_img" name="home_img" onMouseOver="document.images['home_img'].src='img/m_inteiro.png'" onMouseOut="document.images['home_img'].src='img/m_abaixado.png'"/>
<p id="home_txt" name="home_txt" onMouseOver="document.images['home_img'].src='img/m_inteiro.png'" onMouseOut="document.images['home_img'].src='img/m_abaixado.png'"/>Home</p>

 

Demonstro sua função no gif abaixo:

 

 

Se eu não o uso em "<p>" quando o mouse fica em cima de "Home" o menu não abaixa.

[Eliseu M. 2]

Você tem que estudar CSS. Um site muito bom é o www.maujor.com

 

Você tem que aprender a estilizar os links com imagem de fundo (background), e não imagens, tem que aprender também o estado hover, que é quando o mouse passa por cima do elemento, estude também IDs e classes.

[eng442 0]

Eu uso CSS. O ID nos elementos foi justamente pra ajustar sua posição com o CSS.

 

Eu estilizei a página com uma imagem de fundo (as cores do gif estão trocadas)

 

background: #B5B5B5 url("../img/teste.png") no-repeat scroll;

 

No caso desse menu creio que seja necessário usar um <img>. Tanto é que no site onde vi o script estava desta forma.

 

Eu estava só testando esse código que peguei do W3Schools que faz o efeito demonstrado no gif, mas quando o mouse passa por cima do "Home" o menu não abaixa, por isso é necessário repetir a linha em <p>. Gostaria de saber se dá pra reduzir esse código (pode ser usando uma classe no CSS mesmo, se for possível). Você sabe como, Eliseu?

[Nícolas 4]

Esta técnica citada pelo Eliseu chama CSS Sprites

 

Segue o link

http://maujor.com/tutorial/css-sprites.php

 

:)

 

Obs: o Pseudo :hover você deve utilizar em links tag a para que seja compativel com todos os navegadores, pois nem todos os Browsers suportam este pseudo em outras tags como li por exemplo

[eng442 0]

Valeu Nícolas, vou usar algo parecido.