imagen de sustitución como link?

[Chriss]

Hola, estoy intentando hacer una imagen de sustitución con estilos pero no me sale, el código que he puesto es:

# imgdsuti a { background-image: img/img01.jpg; }

# imgdsuti a:hover { background-image: img/img02.jpg; }

esto no se si está bien o no, pero se lo pongo a una capa y no me deja, alguien sabe lo que debo de hacer?


gracias

[kahlito]

Hola Chriss intentalo así:


a.imgdsuti { background-image: img/img01.jpg; }

a:hover.aimgdsuti { background-image: img/img02.jpg; }

y en la capa on donde lo quieras llamar llamalo con un class="imgdusti"

Saludosss

[Chriss]

Jo pues tampoco me sale así, yo he puesto lo que me has dixo::.

Código PHP:

  a.sus { background-image: img/boton.jpg; }  
   

Código PHP:

  a.sus { background-image: img/boton3.jpg; }  
   

y en HTML

Código PHP:

  <div><a class="sus" href="#"><img src="img/boton.jpg"></a></div>  
   

pero no me sale

[kemie]

la sintaxis de tu css esta mal.
deberia de ser:

# imgdsuti a { background-image: url(img/img01.jpg); }

# imgdsuti a:hover { background-image: url(img/img02.jpg); }

no te olvides de tambien asignarle a tus links un alto y ancho, para mostrar la imagen completa.

[kahlito]

Cierto Kemi estaban mal y mal lo volví a poner yo

Saludosss

[fjmasero]

Bueno, utilizando lo q en esto post se dice, me he propuesto crear un menú horizontal con imágenes.

En dicho menú, con varios enlaces-imagen, hay una imagen q no deber ser enlace. Es decir, sería la opción activa.

El código

Código:

  #imgdsut4 { background-image: url(b_contacta_on.gif); width:150px; height: 26px;}
  #imgdsut4:hover { background-image: url(b_contacta_off.gif); width:150px; height: 26px; }
  #imgdsut5 { background-image: url(b_contacta_on.gif); width:150px; height: 26px;}
  #imgdsut5:hover { background-image: url(b_contacta_off.gif); width:150px; height: 26px; }

  #imgdsut6 { background-image: url(b_contacta_off.gif); width:150px; height: 26px;}

  #imgdsut7 { background-image: url(b_contacta_on.gif); width:150px; height: 26px;}
  #imgdsut7:hover { background-image: url(b_contacta_off.gif); width:150px; height: 26px; }
...
  <a id="imgdsut4" href="#"></a>
  <a id="imgdsut5" href="#"></a>
  <a id="imgdsut6"></a>
  <a id="imgdsut7"href="#"></a>

Así lo consigo, pero en la opción que no debería ser enlace me veo obligado a poner un <a...> para seguir con la barra horizontal.

Si en vez de ponerlo con el <a ...> lo pongo con un div, se "rompe" la linea horizontal (y no puedo posicionarla con top y left, pq tengo muchas páginas donde se va a incluir, pero en diferentes posiciones).

si pongo simplemente una <img src ...>

Código:

<img src="b_contacta_off.gif" width="150" height="26" align="absmiddle">

gracias al absmiddle se alinea horizontalmente, pero se separa por la derecha.

No sé, seguro q se me escapa algo.

Además, si se reduce el tamaño de la ventana, se "rompe".

Espero vuestra ayuda.

Salu2 y gracias.