Foros del Web » Creando para Internet » CSS »

quiero un botón con efecto rollover

Estas en el tema de quiero un botón con efecto rollover en el foro de CSS en Foros del Web. Tengo un botón que es una imagen, y quiero que al poner el ratón encima cambie a otro botón que tiene un aspecto distinto pero ...
  #1 (permalink)  
Antiguo 28/04/2011, 12:25
 
Fecha de Ingreso: abril-2011
Ubicación: barcelona
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
quiero un botón con efecto rollover

Tengo un botón que es una imagen, y quiero que al poner el ratón encima cambie a otro botón que tiene un aspecto distinto pero el mismo tamaño.
Quiero hacerlo con HTML y CSS
adjunto mi html, y css a ver si me podeis indicar donde me equivoco ya que soy novato.
HTML
<div id="gratuit">
<a href="contactar/contactar.html"><img src="objetos/diagnostic.gif"
alt="boton contactar"/></a>
</div>

CSS
#gratuit {float:center; height:40px; margin-left:30px;
width: 710px;
;background-repeat:no-repeat; background-position:center;}

#gratuit a{background-image:url(objetos/diagnostic.gif); display:block
;background-repeat:no-repeat; background-position:center;}
#gratuit a:hover{background-image:url(objetos/diagnosticover.gif); display:block
;background-repeat:no-repeat; background-position:center;}
  #2 (permalink)  
Antiguo 28/04/2011, 12:54
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: quiero un botón con efecto rollover

Usa sprites.
Busca en google CSS Sprites y te saldran miles de tutoriales para lograr lo que deseas.

Saludos
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 29/04/2011, 04:22
 
Fecha de Ingreso: abril-2011
Ubicación: barcelona
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: quiero un botón con efecto rollover

Mi pregunta es saber donde me equivoco para que no funcione el cambio de imagen al poner el cursor encima, usando HTML y CSS.
acaso no se puede hacer?
  #4 (permalink)  
Antiguo 29/04/2011, 07:47
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: quiero un botón con efecto rollover

te has molestado en buscar por los términos css sprite?? ya lo hago yo por tí
  #5 (permalink)  
Antiguo 29/04/2011, 12:40
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: quiero un botón con efecto rollover

La solución rápida a lo que preguntas es:

Código:
<div id="gratuit">
    <a href="contactar/contactar.html">Contactar</a>
</div>

CSS
#gratuit { float:center; height:40px; margin-left:30px; width: 710px; }

#gratuit a {background:url(objetos/diagnostic.gif) no-repeat center center; display:block; }
#gratuit a:hover{background-image:url(objetos/diagnosticover.gif); }
Pero la solución más correcta, es como te han dicho antes. En vez de utilizar dos imagenes diferentes, utilizas una sola que contenga los dos estados y lo que cambias al hacer el hover, es la posición de la imagen. De esa forma, al cargarse los dos estados en la misma imagen, no hay un instante en que pueda no verse ninguna imagen, hasta que se carga la segunda.
__________________
oohh... quisiera ser godines!!!
  #6 (permalink)  
Antiguo 29/04/2011, 12:54
 
Fecha de Ingreso: abril-2011
Ubicación: barcelona
Mensajes: 6
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: quiero un botón con efecto rollover

Ruego me perdoneis si he parecido molesto por vuestra respuesta.
He seguido vuestra sugerencia de hacerlo con css sprite y me ha funcionado bien. Lo que me ha costado mas es hacer con paint.net la imagen total pero lo he logrado generando primero un frame de la suma de dimensiones, y luego importando las imagenes como layers y colocandolas en su sitio.
tengo tambien agradeceros que me hayais enviado la solucion sin sprite
Muchas gracias de un novato agradecido

Etiquetas: efecto, quiero, rollover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:27.