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:
Ver original#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