JMiur [E]

En la 1ª parte de esta serie, mostraba las características de la propiedad background-position y las posibilidades que brinda.

Hay dos ejemplos típicos que podemos ver en la web y que usan esta propiedad; el primero es muy sencillo y probablemente, es el uso más importante que podemos darle; el segundo es más complejo pero vale la pena tratar de entenderlo.

Empecemos con el más simple.

El CSS nos da la posibilidad de detectar ciertas acciones sobre las etiquetas y, fundamentalmente, sobre los enlaces, tanto en Internet Explorer como en Firefox (¡milagro, milagro!)

Un botón o un enlace tienen tres estados posibles que pueden ser detectados y sobre los que puede actuarse:

inactivo: el estado normal
activo: cuando se hace click
over: cuando se coloca el puntero del ratón sobre él

Las propiedades de estilo de estos estados se definen con:

a:link { ... }
a:active { ... }
a:hover { ... }

Y dentro de la etiqueta A, los eventos que controlan las acciones son:

onmouseout=" ... "
onmouseover=" ... "
onclick=" ... "

Un rollover es un efecto mediante el cual cambiamos la imagen de un botón en función de las acciones del usuarios sobre él; normalmente, lo vemos cuando pasamos el cursor sobre él o hacemos click y la imagen cambia.

Para hacer esto, utilizando los eventos, detectamos el estado y actuamos en consecuencia, cambiando una imagen por otra:
<a href="URL_destino">
<img src="URLimagen_inactiva" id="nombre"
onmouseout="getElementById('nombre').src='URLimagen_inactiva';"
onclick="getElementById('nombre').src='URLimagen_activa';"
onmouseover="getElementById('nombre').src='URLimagen_over';"/>
</a>
O también, simplificando:
<a href="URL_destino"
onmouseout="getElementById('nombre').src='URLimagen_inactiva';"
onmouseover="getElementById('nombre').src='URLimagen_over';"/>
<img src="URLimagen_inactiva" id="nombre" >="" />
</a>
En el primer caso, necesitamos tres imágenes, en el segundo, necesitamos dos. El problema se genera porque sólo la imagen inactiva es cargada con la página, las otras se cargan cuando se produce el evento. En el caso de onmouseover tardará un poco pero el efecto, generalmente se verá, en el caso del onclick, no lo veremos casi nunca porque la acción se ejecutará antes que se cargue la imagen.

Es aquí donde la técnica que nos ocupa puede venir en nuestra ayuda. Usaremos un solo archivo que contendrá las dos o tres imágenes necesarias y que se cargará junto con la página.

Básicamente, lo que debemos hacer es crear un enlace vacío:
<a href="URL_destino" style=" ... propiedades ... "
onmouseout="this.style.backgroundPosition='left top';"
onclick="this.style.backgroundPosition='right top';"
onmouseover="this.style.backgroundPosition='center top';">
&#160;
</a>
que tendrá las siguientes propiedades elementales:
background: transparent url(URL_imagen) no-repeat left top;
width:ANCHOpx; /* la mitad o la tercera parte del ancho de la imagen */
height: ALTOpx; /* el alto de la imagen */
display: block;
text-decoration: none;
y colocar &#160;, o un espacio, entre la etiqueta de apertura y la de cierre para que los navegadores no la confundan con una etiqueta vacía.

Esto, puede hacerse de manera más sencilla, creando una clase:
a.demo, a.demo:link, a.demo:visited {
background: transparent url(URL_imagen) no-repeat left top;
width: ANCHOpx;
height: ALTOpx;
display:block;
text-decoration:none;
}

a.demo:active {
background-position: right top;
}

a.demo:hover {
background-position: center top;
}
A la que usaremos de la siguiente manera:
<a href="URL_destino" class="demo"> </a>
La siguiente tabla muestra los efectos sobre algunos botones y las imágenes correspondientes:

Botones con efecto onmouseover
BOTÓNIMAGEN







PROPIEDADES:
background: transparent url(URL_imagen) no-repeat left top;
width: ANCHOpx;

height: ALTOpx;

EVENTOS:
onmouseout="this.style.backgroundPosition='left top';"
onmouseover="this.style.backgroundPosition='right top';"


Botones con efecto onmouseover y onclick
BOTÓNIMAGEN



PROPIEDADES:
background: transparent url(URL_imagen) no-repeat left top;
width: ANCHOpx;

height: ALTOpx;

EVENTOS:
onmouseout="this.style.backgroundPosition='left top';"
onmouseover="this.style.backgroundPosition='center top';"
onclick="this.style.backgroundPosition='right top';"


Yendo un poco más allá, en el Simon Collison's Journal muestran una técnica que amplia las posibilidades del rollover, combinando imágenes, fondos y textos de manera fácil.

El archivo se hace de la misma manera, añadiendo las dos imágenes, una al lado de la otra:



Quiere decir que, siguiendo el criterio mostrado hasta ahora, bastaría crear un bloque de 200x100.

¿Qué pasaría si el bloque es más alto que la imagen, digamos de 150 pixeles y le agregamos un color de fondo para ver la diferencia?
Aparece un área vacía abajo, hemos agrandado el espacio pero la imagen no llega a cubrirlo.
Un texto cualquieraEn ese espacio, podemos poner un texto cualquiera.
Pero, como el texto aparece arriba y no abajo, lo más fácil es deslizar la imagen hacia abajo:
background: #colorFONDO url(URL_imagen) no-repeat 0 50px;
Un texto cualquieraPero esto no resuelve el problema, en cuanto ponemos el mouse encima, deja de funcionar.
También debemos establecer las propiedades de los eventos:
background: #colorFONDO url(URL_imagen) no-repeat 0 50px;
onmouseover="this.style.backgroundPosition='-200px 50px';"
onmouseout="this.style.backgroundPosition='0 50px';
Un texto cualquieraUtilizamos -200px para deslizar el fondo hacia la segunda imagen, la que está a la derecha.

Creando las clases necesarias, todo esto es muy sencillo:
.rollovertexto {
width: ANCHOimagen;
height: ALTOimagen + ALTOtextos;
background: colorFONDO url(URL_imagen) no-repeat 0 ALTOtextos;
[ ... propiedades del borde y de los textos ... ]
}

a.rollovertexto:link, a.rollovertexto:visited, a.rollovertexto:active {
background-color: colorFONDO;
background-position: 0 ALTOtextos;
[ ... propiedades del borde y de los textos ... ]
}

a.rollovertexto:hover {
background-color: nuevocolorFONDO;
background-position: -ANCHOimagen/2 ALTOtextos;
[ ... propiedades del borde y de los textos ... ]
}
Y las usaremos así:
<a href="URL_destino" class="rollovertexto">Texto a mostrar.</a>

21 comentarios:

Glitches  

Muy interesanten tanto la primera como la segunda parte. Ya tengo para andar enredando un rato.
Gracias por compartirlo
un saludo

Responder
JMiur  

Gracias amigo, cuéntame si encuentras algo interesante :)

Responder
Luzbelito  

excelente, lo andaba buscando y no lo encontraba!!! Sin duda va enlace en mi blog.

Saludos

Responder
JMiur  

Gracias Luzbelito, es una técnica muy útil.

Responder
Gem@  

El CSS o la CSS como quiera que se diga está resultado ser el corazón del blog :)
Me queda por aprender y poco tiempo para intentarlo...

Responder
JMiur  

Sin duda, Gem@; hoy, es la esencia de una pagina web.

Responder
Protegon  

Hey JMIUR en un post en mi blog cuando pasas el mouse por una imágen aparece una pequeña lupa, cómo hago para quitarle eso?

Responder
JMiur  

Dime cual es el post.

Responder
Lucas  

muy bueno, estoy haciendo unas pruevas para el blog de un amigo, y era lo que buscaba mil gracias, ahora una consulta, si queremos agregar mas de un boton, es decir dos botones cada uno con link distintos, como se puede hacer
gracias de nuevo :)

Responder
JMiur  

Es lo mismo- Como son clases, puede hacerse tamtos botones como uno quiera, serían iguales excepto que tendrian distintos atributos HREF.

Responder
Lucas  

te agradesco la respuesta, y si no es mucha molestia, podrias poner un boton de ejemplo, y abajo el codigo completo que usaste para hacerlo funcionar y asi entender mejor,ya que tengo una mescolanza de partes no se el orden en el cual se debe declarar cada parte, porque yo estaba usando el primer formato (el de las tres imagenes), lo aplique y me funciona, pero como dejiste es demaciado lento, mil gracias :)

Responder
JMiur  

Es que los códigos son los que están en el el post.

Responder
Lucas  

Acabo de entender el codigo, fantastico, mil gracias :)

Responder
Uno mas del monton  

Muy bueno :D ahora si me van a cargar bien las imagenes ;) gracias.

Ya que estamos te queria preguntar si sabias de alguna forma de hacer el efecto botón en 3d pero a imagenes no a un texto, osea tengo una imagen y le agrego un marco al rededor para el boton arriba y otro para boton abajo. Saludos

Responder
JMiur  

No entiendo muy bien la pregunta pero, podrías usar distintos tipos de borde. Si hay algún ejemplo de lo que quisieras lograr, me ayudaría a responderte.

Responder
Uno mas del monton  

Mi idea era agregar un marco asi como el del boton Home que esta de ejemplo en el post a las imágenes de http://expresandome.com.ar
Si no sabes no hay drama, pregunto porque creo que alguna vez tube un programa que hacia eso mismo y no recuerdo.. busqué un poco y encontre muchas formas de hacer botones pero desde cero no con imágenes.

Responder
Uno mas del monton  

osea no se cuales son los tipos de bordes que se pueden agregar.. la cosa es que quede asi como con un efecto boton como el de home.. con photoshop debe de ser algo muy fácil pero no lo tengo y nunca lo use xD
esto es un intento fallido mira
http://probandoplantillasss.blogspot.com/2009/02/blog-post.html

Responder
JMiur  

Las propiedades CSS de los bordes están acá pero no creo que sea l oque buscas. Parecería que el problema es crear la imagen.

Tal vez, algunas de esta herramientas online puedan ayudar: 1 | 2 | 3 | 4

Responder
Home Cinema  

Hola JMiur, tengo una duda, yo quiero hacer con estos botones un menu tipo CSS .. pero con esos botones.
Lo que pasa es que yo quiero ponerlos uno al lado del otro, pero no me deja, me lo coloca abajo del otro :( , como puedo hacer para que esten 1 al lado del otro?
fijate en mi blog como quedo: http://www.xhomecinemax.blogspot.com
Saludos =)

Responder
JMiur  

Para comenzar, puedes agregarles la propiedada float: left; a cada botón y de ese modo se mostrarán uno al lado del otro y no uno debajo del otro.

Algo similar ocurrirá si en lugar de disply:block, usas display:inline-block

Responder
Home Cinema  

Con el float:left lo pude solucionar y quedo perfecto.
Muchas gracias JMiur :)
saludos!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR