Foros del Web » Creando para Internet » CSS »

cambiar una imagen X por una Y al pasar el mause...

Estas en el tema de cambiar una imagen X por una Y al pasar el mause... en el foro de CSS en Foros del Web. hola que tal, tengo un problema a la hora de aplicar un codigo en el css... resulta que tengo una imagen "X" en mi html, ...
  #1 (permalink)  
Antiguo 27/05/2011, 17:54
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 7 años, 4 meses
Puntos: 6
Pregunta cambiar una imagen X por una Y al pasar el mause...

hola que tal, tengo un problema a la hora de aplicar un codigo en el css...

resulta que tengo una imagen "X" en mi html, y necesito que al pasar el mause cambie a una imagen "Y".

dejo el código html:

Código HTML:
Ver original
  1. <a href="#"><img src="images/portafolio/lesalon_off.jpg" /></a>

aquí mi supuesto css:

Código CSS:
Ver original
  1. .bloke_somosder img:hover {
  2.     background-image:url(images/portafolio/imagenX_on.jpg);
  3. }

Bueno y la cosa es que no me resulta...y no quiero aplicar ni jquery ni nada que haga el proceso mas complicado...es posible hacer lo que necesito en css?

Saludos y espero sus respuestas!!
  #2 (permalink)  
Antiguo 27/05/2011, 18:44
Avatar de JMS
JMS
 
Fecha de Ingreso: junio-2007
Ubicación: Mexico, veracruz
Mensajes: 790
Antigüedad: 10 años, 4 meses
Puntos: 44
Respuesta: cambiar una imagen X por una Y al pasar el mause...

Ya se habia dado antes este problema mira aqui esta el ejemplo funcionando claro.
http://www.araudi.net/forosdelweb/jpick.html

Lo único que veo en tu ejemplo (código que pusiste) es que no mandas a llamar el id o clase que hace que funcione el hover, cosa que se tiene que hacer en el <a href="#" id="a que llama?????">
__________________
L.I.A. Josué Marín Saldaña
Grupo kumiko - Diseño gráfico, diseño web, Poemas, Juegos.
http://www.grupokumiko.com
  #3 (permalink)  
Antiguo 27/05/2011, 19:10
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 7 años, 4 meses
Puntos: 6
Respuesta: cambiar una imagen X por una Y al pasar el mause...

Cita:
Iniciado por JMS Ver Mensaje
Ya se habia dado antes este problema mira aqui esta el ejemplo funcionando claro.
http://www.araudi.net/forosdelweb/jpick.html

Lo único que veo en tu ejemplo (código que pusiste) es que no mandas a llamar el id o clase que hace que funcione el hover, cosa que se tiene que hacer en el <a href="#" id="a que llama?????">
hola, mira sabes que te seguí, pero no no me esta resultando... tengo esto:

Código HTML:
Ver original
  1. <div class="bloke_somosder" >
  2.          
  3.       <table>
  4.       <tr>
  5.         <td><a href="#" id="on"></a></td>
  6.         <td></td>
  7.         <td></td>
  8.       </tr>
  9. </div>

el css:
Código CSS:
Ver original
  1. .bloke_somosder{
  2.     padding:20px 20px 0 0;
  3.     float: right;
  4.     height: 450px;
  5.     width: 400px;
  6.     margin:0 auto;
  7. }
  8. .bloke_somosder a #on {
  9.     display: block;
  10.     width: 300px;
  11.     height: 100px;
  12.     background:#666 url(images/portafolio/lesalon_off.jpg) no-repeat;
  13. }
  14. .bloke_somosder a #on:hover {
  15.     background:#666 url(images/portafolio/lesalon_on.jpg) no-repeat;
  16. }

pero no me sale nada :s ....que será??

de ante mano muchas gracias!!
  #4 (permalink)  
Antiguo 27/05/2011, 19:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.784
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: cambiar una imagen X por una Y al pasar el mause...

dado que el enlace tiene una id basta con colocar
Código CSS:
Ver original
  1. .bloke_somosder{
  2.     padding:20px 20px 0 0;
  3.     float: right;
  4.     height: 450px;
  5.     width: 400px;
  6.     margin:0 auto;
  7. }
  8. #on {
  9.     display: block;
  10.     width: 300px;
  11.     height: 100px;
  12.     background:#666 url(images/portafolio/lesalon_off.jpg) no-repeat;
  13. }
  14. #on:hover {
  15.     background:#666 url(images/portafolio/lesalon_on.jpg) no-repeat;
  16. }

otra cosa revisa que la imagen este en su lugar
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 28/05/2011, 08:31
Avatar de JMS
JMS
 
Fecha de Ingreso: junio-2007
Ubicación: Mexico, veracruz
Mensajes: 790
Antigüedad: 10 años, 4 meses
Puntos: 44
Respuesta: cambiar una imagen X por una Y al pasar el mause...

Asi es como se debe de hacer, la muestra perfecta te la dejo el amigo Ag666. Debe de funcionar, si gustas pasanos el link para verlo y decirte donde esta el problema, aunque con eso no debe de haber tal.
__________________
L.I.A. Josué Marín Saldaña
Grupo kumiko - Diseño gráfico, diseño web, Poemas, Juegos.
http://www.grupokumiko.com
  #6 (permalink)  
Antiguo 29/05/2011, 19:44
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 7 meses
Puntos: 142
Respuesta: cambiar una imagen X por una Y al pasar el mause...

Son en verdad dos los errores en tu código. Para empezar, dado que el "a" es el mismo que el identificador, estos deberían estar juntos, aunque esto más bien aplica a las clases:

Código HTML:
<a class="x">link</a> 
Sería "a.x:hover{}", no "a .x:hover{}"

El segundo detalle es precisamente lo que omití en el anterior, ya que dado se trata de un ID, este debe ser asignado directamente, ya que es único:

En lugar de "a#x:hover{}", es "#x:hover{}" nada más.

Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: pasar
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




La zona horaria es GMT -6. Ahora son las 21:40.