Efecto MouseOver con css(Hojas de estilo)

dark_eap · 24 Dic 2005

Hola a todos pues este tuto no es la gran cosa.

Objetivo:
Crear un efecto MouseOver con hojas de estilo(css) y HTML queda bien

<span style="colorrange">Paso1: </span>

Crearemos nuestro css. con lo siguiente:

.tdfuera{
border:solid #000000 1pt;
background-color: #535353;
color:#FFFFFF;
font-weight: bold;
font-family:Verdana,Arial,Helvetica;
font-size: 10pt;
cursor:hand;
}
.tddentro{
border:solid #B01717 1pt;
background-color: #B01717;
color: #FFFFFF;
font-family:Verdana,Arial,Helvetica;
font-weight: bold;
font-size: 10pt;
cursor:hand;
}

// Lo guardamos como style.css (El nombre no importa pongan el que quieran)

<span style="colorrange">Paso2: </span>

Creamos la pagina html:

<html>
<head>
<title>InbSystem</title>
<link rel='stylesheet' type='text/css' href='style.css'>// Hoja de estilo
</head>
<body>
<table align=center width=800 border=1 bordercolor=#535353 cellpadding=0 cellspacing=0>
<tr>
<td class=tdfuera onMouseOver='this.className='tddentro';' onMouseOut='this.className='tdfuera';' onClick='location.replace('modulo.usuario.php');' align=center width=133>Usuarios
</tr>
</table>
</body>
</html>

bueno el truco esta en saber llamar las clasees del css con los los eventos
onMouseOver y onMouseOut

Resultado
<span style="colorrange">onMouseOut </span>
<img src="http://img379.imageshack.us/img379/8846/out2id.jpg" border="0" alt="Imagen IPB" />

<span style="colorrange">onMouseOver </span>
<img src="http://img379.imageshack.us/img379/9705/hover7uo.jpg" border="0" alt="Imagen IPB" />

Bueno espero sirva de algo

:wink: Saludos..

Anunciante

Faraon · 24 Dic 2005

muchas gracias por tu aporte.

Abrazos

Accede o regístrate

Efecto MouseOver con css(Hojas de estilo)

dark_eap Nuevo usuario

Anunciante

Faraon Supremo Egipcio

Accede o regístrate

Efecto MouseOver con css(Hojas de estilo)

dark_eap Nuevo usuario

Anunciante

Faraon Supremo Egipcio

Búsquedas útiles