1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Efecto MouseOver con css(Hojas de estilo)

Tema en 'Tutoriales Desarrollo Web' iniciado por dark_eap, 24 Dic 2005.

  1. dark_eap

    dark_eap Nuevo usuario

    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

    <!--coloro:eek:range--><span style="color:eek:range"><!--/coloro-->Paso1: <!--colorc--></span><!--/colorc-->

    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)

    <!--coloro:eek:range--><span style="color:eek:range"><!--/coloro-->Paso2: <!--colorc--></span><!--/colorc-->

    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
    <!--coloro:eek:range--><span style="color:eek:range"><!--/coloro-->onMouseOut <!--colorc--></span><!--/colorc-->
    <img src="http://img379.imageshack.us/img379/8846/out2id.jpg" border="0" alt="Imagen IPB" />

    <!--coloro:eek:range--><span style="color:eek:range"><!--/coloro-->onMouseOver <!--colorc--></span><!--/colorc-->
    <img src="http://img379.imageshack.us/img379/9705/hover7uo.jpg" border="0" alt="Imagen IPB" />

    Bueno espero sirva de algo

    :wink: Saludos..
     
  2.  
  3. Faraon

    Faraon Supremo Egipcio

    muchas gracias por tu aporte.

    Abrazos
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·