PDA

Ver la Versión Completa : Agrandar botones al pasar el cursor

LuisAlf::
06-10-2010, 22:39:00
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:


<!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 (http://www.w3schools.com/CSS/pr_pseudo_hover.asp))

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 (http://www.google.com.co/#q=javascript+hover)


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