Etiqueta img: atributo src en CSS

[auttranadhie]

Hola a todos:

Este mensaje es sólo para confirmar una sospecha:

¿No es posible utilizar el atributo src para la etiqueta img cuando usamos CSS?

He buscado alternativas como background pero no me acaban de convencer porque aparece el iconito (o como se llame) en el navegador que delata que a la imagen le falta precisamente el contenido propio.

Por otro lado, lo que pretendo es que, cuando sucedan eventos hover o active, cambie la imagen, pero la opción antes señalada no funciona en Internet Explorer (para variar, claro).

¿Alguna sugerencia o alternativa?

Como siempre se agradecen los comentarios de todos.

Gracias y un saludo.

[memoadian]

usa otra etiqueta. para que usar img con background?

puedes uasr p, a, li, etc. etc.

[pzin]

El atributo SRC es un atributo HTML, no de CSS. Y es natural, dado que una imagen es un elemento del HTML —léase contenido—, no del diseño en sí.

Puedes ponerle un fondo con background a una imagen por cuestiones de decorativas, como usar un patrón y añadirle un padding a la imagen.

Alternativa puras en CSS, usar otro elemento y usar imágenes de fondo distintas —o la misma jugando con background-position— en :hover. Otra idea es superponer otro elemento a IMG vacío y cambiar sus atributos en su estado :hover.

Si quieres cambiar SRC de una imagen tienes que usar javascript.

¿Para qué lo quieres exactamente?

[auttranadhie]

Hola, de nuevo:

Gracias por las respuestas.

Mi intención es que cuando pase el ratón por encima o se haga clic cambie el color del icono (por tanto, la imagen debe ser diferente en cada caso).

Ya había pensado en la opción de una imagen vacía como src y luego utilizar background para ir cambiando las imágenes. Aún así, creo que con IE la cosa sigue sin funcionar haciendo uso de CSS. Con el resto de navegadores va de maravilla; pero debo hacerlo posible para IE puesto que mucha gente lo utiliza y no puedo condicionar al usuario hacia unos navegadores específicos.

Para un javascript, ¿cuál sería, en líneas generales, el código si no es molestia?

Nota para moderadores: les ruego que si consideran que el tema deba ser transferido a otro foro, así lo hagan. Gracias.

Muchas gracias de nuevo y un saludo a todos.

[memoadian]

mira como lo hice yo en este theme

http://comprar-web.com/stm/

hasta abajo en about hay iconos de youtube, facebook y demás

[pzin]

Hay sistemas completos es CSS para usar iconos de forma totalmente flexible. Por ejemplo, IconMoon o FontAwesome. Básicamente es usar una fuente, con @font-face, de iconos. Son fáciles de implementar ya que son fuentes, y son totalmente flexibles, en color, tamaño, etc. Como una fuente. También vi alguna herramienta que te posibilita crear tu fuente con tus propios iconos. A ver si encuentro el enlace.

En mi opinión es una alternativa muy muy limpia que puedes usar.

Claro, que si sólo vas a usarlo para un único icono, no merece la pena usar algo así.

[auttranadhie]

Hola a los dos:

He probado la página de memoadian. En Firefox funciona muy bien, pero no así en Internet Explorer. No es por criticar el trabajo --que me parece excelente-- sino para observar que IE no cuadra muy bien con todo esto que estamos tratando.

La opción de fuentes se me queda un poco fuera de los propósitos. Ya hemos establecido un grupo de iconos, que aunque los tengo en una TTF, no son muchos y el uso de fuentes obligaría a los usuarios a tenerla; aunque si la opción es que se pueda cargar al iniciar la página me quitaría un montón de trabajo.

¿Cuál sería el código para cargar una TTF al arrancar la página?

Muchas, muchísimas gracias por los comentarios.

[memoadian]

los iconos no se ven en IE?

cual? 7? que raro yo los veo bien en IE8, IE9, firefox, chrome, opera y safari.

si bien es cierto que en IE8 no funciona el slider, por que esta en desarrollo.

me es raro que no te funcione el simple efecto de cambio de color.

[pzin]

Afortunadamente @font-face es soportado por todos los navegadores. Lo que hay son ciertos problemas de compatibilidad con el tipo de fuentes. Pero, existe la herramienta de fontsquirrel que te genera los formatos que te hacen falta, además del código CSS necesario para que funcionen en cualquier navegador.

Si tienes los iconos en una fuente, es sin duda la mejor opción que tienes para usarlos en web.

[memoadian]

una captura



http://img819.imageshack.us/img819/7536/sinttulo1mx.png

[auttranadhie]

Hola, de nuevo:

Pues @font-face va de lujo en todos los navegadores, excepto IE (incluyendo versión 9.08). Veo que esta opción tampoco va a poder ser y mira que era realmente curiosa y fácil.

Respecto a la página de memoadian, efectivamente el slider no funciona pero tampoco el efecto de colores cambiantes.

Bueno, no quiero aburrir con la cuestión. Os agradezco a todos la voluntad puesta en resolver el problema. Aún así me llevo unas cuantas ideas que han surgido.

Un saludo.

[pzin]

Si no te funciona en IE9 debe de haber algún otro problema, ya que IE9 soporta @font-face perfectamente. Tal vez puede ser la fuente en sí el problema.

[memoadian]

font face no te va, hover no te va, creo, yo ya probé mi web en todos los navegadores y si va, creo que el problema es otro.