Foros Club Delphi - Agrandar botones al pasar el cursor

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)

- HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)

- - Agrandar botones al pasar el cursor (https://www.clubdelphi.com/foros/showthread.php?t=70208)

LuisAlf::

06-10-2010 22:39:00

Agrandar botones al pasar el cursor

Hola!!!

Estoy aprendiendo programacion web, y apenas estamos viendo algo de codigo javascript.. con visual studio 2008...

Me gustaria saber como le hacen en algunas paginas para agrandar opciones cuando se pasa el cursor por ellos y regresan a su tamaño original cuando se esta fuera de ellos...quize hacerlo con unos botones y eventos de javascript como onmouseover....pero no encuentro como manipular las propiedades de width y height...

Si estoy por rumbo equivocado...les agradeceria su ayuda...

Como se puede hacer esto??

adeszeus

07-10-2010 01:28:24

que tipo de botones son, muchos hacen efecto rollover con imágenes

roman

07-10-2010 02:51:34

Hay muchos efectos que puedes lograr sin necesidad de javascript. El aspecto de un elemento en tu página está controlado por CSS y éste cuenta con una pseudo propiedad hover que sirve para dar el estilo deseado precisamente cuando el ratón está sobre el elemento.

Aquí un ejemplo muy sencillo:

Código:

<!DOCTYPE HTML>

<html>

<head>

<title> Botón </title>

<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>

<style type='text/css'>

.boton {

    cursor: hand;

    background-color: #336600;

    font: .9em sans-serif;

    color: #FFFFFF;

    width: 100px;

    height: 30px;

    border: 1px solid silver;

    text-align: center;

    line-height: 30px;

}



.boton:hover {

    width: 105px;

    height: 35px;

    line-height: 35px;

    color: #B7FF22;

}

</style>

</head>



<body>

<div class='boton'>

Aprieta

</div>

</body>

</html>

// Saludos

LuisAlf::

07-10-2010 02:59:36

Sabia que por hay iba el asunto....

Ya que habia visto estas propiedades en el codigo html (width y height)

Ok Gracias...voy a implementarlo y haber como funciona la css...:)

movorack

07-10-2010 03:06:22

Puedes conseguir ese efecto de una manera sencilla con CSS (:hover)

no solo podrás cambiar el color del texto, tambièn puedes cambiar el tamaño, tipografia y hasta el fondo del elemento.

si esto no te es suficiente entonces si echas mano de javascript

je :D llegué tarde a responder... :(

La franja horaria es GMT +2. Ahora son las 20:44:40.