css - cómo cambiar la fuente de la imagen por su id?

¿Alguien sabe cómo puedo controlar el origen de la imagen desde el CSS?css - cómo cambiar la fuente de la imagen por su id?

Necesito poder cambiar el src de la imagen del CSS. Tengo las etiquetas de impresión de bucle < img id=.. >, y para cada identificación es una imagen diferente. Quiero ser capaz de establecer la fuente por su id del área css de estilo.

¿Alguien sabe cómo hacer esto?

Fuente

2011-02-27 gabi

Eso no es posible con CSS. Sin embargo, esto es muy fácil con Javascript:

document.getElementById("IdOfImage").src = "SourceOfImage";

Fuente

2011-02-27 17:34:04

grande, voy a comprobar que funciona .. – gabi

es posible. Ver http://stackoverflow.com/a/10247567/461499 – RobAu

Esto no es posible: la fuente de la imagen es parte del marcado, no CSS.

La única solución sería tener div elementos con background-image propiedades en su lugar. Aquellos podría establecer desde el interior de la hoja de estilo:

<div id="image1"></div> 

#image1 { width: 100px; height: 50px; background-image: url(image.gif); }

Sin embargo, con este método se pierde de todas las ventajas de la etiqueta img como

La capacidad de establecer un texto alt
Cambiar el tamaño de
Impresión (la mayoría de los navegadores no imprimen imágenes de fondo)
indexación del motor de búsqueda (probablemente)

la única otra alternativa es mediante el uso de JavaScript, pero eso obviamente no funcionará si JavaScript está deshabilitado, lo que lo convierte en un no-no en mi opinión.

Fuente

2011-02-27 17:30:02

realmente no se puede hacer eso, sin embargo, si usted tiene que hacer que el uso de CSS, puede hacerlo por dos imágenes con el mismo tamaño como esto:

<style> 
img { 
    width:0; 
    height:0; 
    display:block; 
    background: url('2.png') no-repeat bottom left; 
    padding-left:196px; 
    padding-bottom:187px; 
} 
</style> 
<img src="1.png">

Solo lo probé en FF3.6.

Fuente

2011-02-27 17:59:37 markijbema

Encontré this article que podría ser útil. En realidad cambia fondo de una imagen

aquí está el ejemplo de sitio web del caso se pierde:

HTML

<html> 
    <body> 
     <div class="header"> 
      <img class="banner" src="http://notrealdomain1.com/banner.png"> 
     </div> 
    </body> 
</html>

CSS

/* All in one selector */ 
.banner { 
    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: url(http://notrealdomain2.com/newbanner.png) no-repeat; 
    width: 180px; /* Width of new image */ 
    height: 236px; /* Height of new image */ 
    padding-left: 180px; /* Equal to width of new image */ 
}

Fuente

2013-12-20 02:16:59 AaA

Si no lo hace desea utilizar fondos ni utilizar javascript, capas 2 imágenes con diferentes src en la parte superior de cada uno otro (usando posicionamiento absoluto) y usa CSS para ocultar uno u otro. Visualmente será lo mismo que cambiar el src.

Fuente

2014-08-27 12:00:26 Rolf

Esto ahora es posible con CSS3 utilizando el estilo de contenido. Utilizo esto para intercambiar imágenes dentro de un control deslizante en función del tamaño de la ventana a través de consultas de medios.

Editar: Cuando originalmente publiqué esto, no sabía que solo funcionaba en Webkit en este momento. Pero dudo que tarde mucho antes de que gane más funcionalidad en todos los navegadores.

HTML

<img class="img1" src="image.jpg">

CSS

@media (min-width: 768px) { 
    .img1 { 
     content: url(image.jpg); 
    } 
} 
@media (max-width: 767px){ 
    .img1 { 
     content: url(new-image.jpg); 
    } 
}

Fuente

2015-03-03 16:33:06 Charbrec

css - cómo cambiar la fuente de la imagen por su id?

Respuesta

Cuestiones relacionadas