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

[ras_chalo]

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:

<a href="#"><img src="images/portafolio/lesalon_off.jpg" /></a>
 

aquí mi supuesto css:

Código CSS:

.bloke_somosder img:hover {
    background-image:url(images/portafolio/imagenX_on.jpg);
}
 

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!!

[JMS]

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?????">

[ras_chalo]

Iniciado por JMS

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:

<div class="bloke_somosder" >
          
      <table>
      <tr>
        <td><a href="#" id="on"></a></td> 
        <td></td> 
        <td></td>
      </tr>
</table>
</div>
 

el css:

Código CSS:

.bloke_somosder{
    padding:20px 20px 0 0;
    float: right;
    height: 450px;
    width: 400px;
    margin:0 auto;
}
.bloke_somosder a #on {
    display: block;
    width: 300px;
    height: 100px;
    background:#666 url(images/portafolio/lesalon_off.jpg) no-repeat;
}
.bloke_somosder a #on:hover {
    background:#666 url(images/portafolio/lesalon_on.jpg) no-repeat;
}
 

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

de ante mano muchas gracias!!

[ArturoGallegos]

dado que el enlace tiene una id basta con colocar

Código CSS:

.bloke_somosder{
    padding:20px 20px 0 0;
    float: right;
    height: 450px;
    width: 400px;
    margin:0 auto;
}
#on {
    display: block;
    width: 300px;
    height: 100px;
    background:#666 url(images/portafolio/lesalon_off.jpg) no-repeat;
}
#on:hover {
    background:#666 url(images/portafolio/lesalon_on.jpg) no-repeat;
}
 

otra cosa revisa que la imagen este en su lugar

[JMS]

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.

[daPhyre]

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