Foros del Web » Creando para Internet » CSS »

Etiqueta img: atributo src en CSS

Estas en el tema de Etiqueta img: atributo src en CSS en el foro de CSS en Foros del Web. 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? ...
  #1 (permalink)  
Antiguo 03/12/2012, 01:40
Avatar de auttranadhie  
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid (España)
Mensajes: 156
Antigüedad: 13 años, 5 meses
Puntos: 8
Pregunta Etiqueta img: atributo src en CSS

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.
__________________
A. Uttranadhie
  #2 (permalink)  
Antiguo 03/12/2012, 01:54
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 10 meses
Puntos: 641
Respuesta: Etiqueta img: atributo src en CSS

usa otra etiqueta. para que usar img con background?

puedes uasr p, a, li, etc. etc.
  #3 (permalink)  
Antiguo 03/12/2012, 01:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 9 meses
Puntos: 2114
Respuesta: Etiqueta img: atributo src en CSS

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?
  #4 (permalink)  
Antiguo 03/12/2012, 02:11
Avatar de auttranadhie  
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid (España)
Mensajes: 156
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Etiqueta img: atributo src en CSS

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.
__________________
A. Uttranadhie
  #5 (permalink)  
Antiguo 03/12/2012, 02:20
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 10 meses
Puntos: 641
Respuesta: Etiqueta img: atributo src en CSS

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
  #6 (permalink)  
Antiguo 03/12/2012, 02:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 9 meses
Puntos: 2114
Respuesta: Etiqueta img: atributo src en CSS

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í.
  #7 (permalink)  
Antiguo 03/12/2012, 02:46
Avatar de auttranadhie  
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid (España)
Mensajes: 156
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Etiqueta img: atributo src en CSS

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.
__________________
A. Uttranadhie
  #8 (permalink)  
Antiguo 03/12/2012, 02:54
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 10 meses
Puntos: 641
Respuesta: Etiqueta img: atributo src en CSS

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.
  #9 (permalink)  
Antiguo 03/12/2012, 02:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 9 meses
Puntos: 2114
Respuesta: Etiqueta img: atributo src en CSS

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.
  #10 (permalink)  
Antiguo 03/12/2012, 02:58
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 10 meses
Puntos: 641
Respuesta: Etiqueta img: atributo src en CSS

una captura



http://img819.imageshack.us/img819/7536/sinttulo1mx.png
  #11 (permalink)  
Antiguo 03/12/2012, 05:06
Avatar de auttranadhie  
Fecha de Ingreso: noviembre-2008
Ubicación: Madrid (España)
Mensajes: 156
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Etiqueta img: atributo src en CSS

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.
__________________
A. Uttranadhie
  #12 (permalink)  
Antiguo 03/12/2012, 05:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 19 años, 9 meses
Puntos: 2114
Respuesta: Etiqueta img: atributo src en CSS

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.
  #13 (permalink)  
Antiguo 03/12/2012, 07:49
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 10 meses
Puntos: 641
Respuesta: Etiqueta img: atributo src en CSS

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.

Etiquetas: img, src
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 17:12.