como hacer que las imagenes cambien cuando pasa el raton por encima sin javascript

[Reyphp]

hola amigos por ahora no tengo una pagina web para ayuda de webmaster.

hace unos dias intentando como hacer que una imagen con enlace, que cambiara al pasar el raton por encima como por ejemplo un boton de facebook que sea de color claro y cuando el puntero pase por encima este se ponga de un color oscuro, hace mucho lo vi por internet pero en javascripts. y yo lo queria en css bueno de una u otra manera... pensando, analisando los navegadores, el css y con suerte, etc. lo logre

comunmente cualquiera que busque en google esto lo va encontrar en javascript o jquerry (Creo) pero yo les traigo un tutorial, como hacer esto en css, sin javascript ni jquery

NOTA: si alguien quiere usar el codigo y/o el texto. quiere publicarlo en su web, quiere publicarlo en taringa!, en otro foro, etc. puede hacerlo sin la nesesida de atribucion porque esta bajo copyleft, pero si alguien quiere atribuirme este tutorial puede hacerlo atribuyendo a ROGER OVILSO (Yo).


Empesemos con el tutorial espero que a alguien le sirva:

TUTORIAL:

comensemos con el html

Código HTML:

<div id="boton-facebook">
  <a href="http://www.facebook.com" target="_blank" >
<img src="imagen-trasparente.png" width="60px" height="60px"/></a>
</div> 

Esplico el codigo anterior:

solo e creado una capa de nombre "boton-facebook" esta es el contenedor del boton social facebook

luego un enlace que apunta hacia facebook y dentro del enlace e puesto una imagen completamente trasparente con el tamaño de 1px aunque el codigo html diga que es de 60px con 60px con la intencion de que se vea la imagen del boton facebook que pondre de fondo

ahora utilizaremos CSS

Código CSS:

#boton-facebook { float: left; width: 60px; height: 60px; }
#boton-facebook img { float: left; width: 60px; height: 60px; background-image: url(boton-facebook-inactivo.png) }
#boton-facebook img:hover { background-image: url(boton-facebook-activo.png)
 

esplico el codigo anterior:

el primero:

#boton-facebook: este es el contenedor del boton lo e puesto a flotar a la izquierda y de agregue 60px de ancho y 60px de alto

el segundo:

#boton-facebook img: este es el boton que las personas beran por defecto cuando entren a la pagina web lo que e puesto en este codigo es lo siguiente:

le indique que flotara hacia la izquierda al igual que la anterior le indique que tubiera 60px de ancho y 60px de alto y le e dicho cual es la imagen a poner... esta imagen se vera gracias a que el codigo html puse una imagen trasparente si ubiese puesto una imagen de color ejemplo blanco, negro azul ete. la imagen que habia puesto en el css no se ubiese observado ya que la otra la taparia por completo.

#boton-facebook img:hover en este codigo solo e puesto una imagen que es la imagen que se vera cuando la persona ponga el clic sobre el boton social.

Facil verdad cuando yo lo nesesitaba que recuerde solo lo encontraba en javascripts (era principiante) es increible que algo tan facil con css muchos prefieran usar un exajerado codigo javascript,,,,, espero que a alguien le sirva...


pueden descargalo de aqui:

http://www.mediafire.com/?gtvwlizjuvxiu2t

[IsaBelM]

lee este tutorial

[Reyphp]

buen tutorial amiga se puede ahorrar mucho tiempo de carga asi

[chivassa]

bueno por el tutorial gracias me ayudo con una duda que tenia en mi caso soy nuevo en esto de los códigos y apenas empiezo pero yo también busque es efecto y lo encontré con css espero que aun te sirva

<a href="pahina.php">
<img src="imagen1.png" onmouseover="this.src='imagen2.png'" onmouseout="this.src='imagne1.png';"/>
</a>
con lo que leí el onmouseover es un evento del raton que se activa al pasar el cursor sobre algo

y en mi caso imagen1 es la misma que imagen2 solo que la 1 es a blanco y negro y la 2 a color la imagen es en blanco negro y al pasar el cursor se ve a color y al quitarlo queda de nuevo en blanco y negro, por este motivo hay que poner el segundo onmouseout o todo quedara en la segunda imagen y ya bueno espero te haya ayudado

[IsaBelM]

chivassa, ese código que muestras no es css, es javascript. lo que hace el código es modificar el dom. en este caso sobreescribe el atributo src de la imagen.

mi consejo es que uses css, ya que si el usuario navega con javascript desactivado, como en mi caso, no se producirá el rollover

[sergiozx]

Te aconsejo que sigas la seccion de css sprites del tutorial de Isabel ya que es la manera más profesional.

De todos modos si crear un sprite es demasiado avanzado para ti, te aconsejo que lo hagas con diferentes imágenes a través de la etiqueta background.
Por ejemplo para un botón:

Código PHP:

<a class="boton" href="http://example.com">Descarga</a>
 

Código CSS:

.boton {background:url(http://example.com/img/boton-off.png)}
.boton:hover {background:url(http://example.com/img/boton-on.png)}
 

Ahí lo hemos aplicado a un enlace. Pero lo puedes hacer a otro elemento, por ejemplo a un div:

Código PHP:

<div class="cambiodefondo"> </div>
 

Código CSS:

.cambiodefondo {
background:url(http://example.com/img/boton-off.png);
width:400px;
height:300px;
}
.cambiodefondo:hover {
background:url(http://example.com/img/boton-on.png);
}
 

[chivassa]

si tines razon no es css y apenas empieso en esto de las paginas pero al igual que tu sigo buscando esto mismo con css y gracias por el consejo si encuentro como hacer esto con css lo publico lo mas pronto posible aqui je je

[ZoroRoronoa]

no entiendo xque usas las leyendas facebook en tu codigo amigo.
al fin y al cabo no es un codigo proporcionado por facebook, es simplemente un contenedor, eso es algo simple de hacer, y no solo para links o botones como dices...

el efecto :hover de CSS, en verdad de pueden lograr muchas cosas (:
Saludos.

[kseso?]

Año 2011
Los guruses ya empiezan a dar la tabarra con el borrador de trabajo de css 4.
Pasada ya la "novedad" de css3 y ya funcionando en muchas páginas de producción.
¿Un tutorial de uso de la pseudoclase :hover?
¿Qué será lo próximo? ¿el "descubrimiento" de cómo centrar una caja en la horizontal?

Por cierto, la etiqueta img debería incluir el atributo alt

[Reyphp]

Iniciado por ZoroRoronoa

no entiendo xque usas las leyendas facebook en tu codigo amigo.
al fin y al cabo no es un codigo proporcionado por facebook, es simplemente un contenedor, eso es algo simple de hacer, y no solo para links o botones como dices...

el efecto :hover de CSS, en verdad de pueden lograr muchas cosas (:
Saludos.

puse como ejemplo a facebook por el boton de facebook, tambien puede usar twitter pero facebook me parecio mas conosido si descargas el codigo en el enlace que deje veras porque puse facebook como ejemplo