vincular url de una imagen en css

[vic4ever]

Hola, necesito incluir las direcciones de unos iconos en la hoja de estilo..

de tal forma que tenga por ejemplo dos clases

.icono1{

}

.icono2{

}

y que segun la que elija me obtenga la imagen de una url o de otra..

se puede hacer esto??

he intentado con el atributo src pero no se puede poner el el css...

sugerecias..¿?

gracias.

[juanchilo]

Perdon, lo que buscas es poner una imagen que se encuentra alojada en otro sitio? mmm bueno si es eso tan simple seria asi:


. icono1 { background-image: url(http://www.dominio.com/imagen.png) }

.icono2 { background-image: url(http://www.dominio.com/imagen2.png) }

pero dudo de si quieres simplemente eso.
cuenta mejor a ver!!!

[fullmental]

a ver si esto te puede ayudar...

1
si quieres que muestre algo cuando eliges una u otra lo puedes hacer como ya te dijeron con backgroun-image... solo tienes que darle el ancho y alto de tu imagen de fondo y de preferencia un display:block;

2
otra pseudo clase que te puede ayudar es after y before:

Código:

.icono1:before {content:url(images/icono1.gif)}
.icono2:before {content:url(images/icono2.gif)}

[juanchilo]

pues yo no le recomendaría los pseudos after y before, ya que estos no son soportados por Internet Explorer.
saludos

[vic4ever]

Bien, asi se podria hacer.. pero solo se puede asignar esa clase a una celda y no a una imagen, que seria lo mejor no?

es decir, lo ideal seria que yo pueda hacer
<img class="icono1" width="193" height="50">

pero me da que no se puede no?

entonces tendria que reservar un hueco (exacto) en una celda y hacerlo asi.. pero claro me sale la imagen en su tamaño normal, y si esta es mas grande que el espacio reservado queda mal....

si quiero reducir la imagen en la css que propiedad debo utilizar?

[fullmental]

Iniciado por juanchilo

pues yo no le recomendaría los pseudos after y before, ya que estos no son soportados por Internet Explorer.
saludos

disculpa pero ¿que es explorer?

[Rafael]

El navegador de Microsoft.

Aunque el before y after no le veo mucho sentido en este caso. Son entre otras cosas para agregar algo antes y después de un elemento... valga la redundancia.

[Movingaway]

Yo probe el BEFORE pero nada, tengo el siguiente:

Código:

.soportegeek {
	font-family: tahoma;
	font-size: 12px;
	color: #636466;
	background-image: url(images/soportegeek_01.gif);
	background-repeat: no-repeat;
	background-position: left;

Asi tendria que quedar:

Código:

.soportegeek {
	font-family: tahoma;
	font-size: 12px;
	color: #636466;
	background-image: before {content:ACA LA URL (CARPETA DE LA IMAGEN)}
	background-repeat: no-repeat;
	background-position: left;

Pero no me funciona

[Carlangueitor]

Movingaway, revisa la fecha de los post, este tiene 5 años. Y no te funciona por que así no se usa el pseudo elemento before: http://www.w3schools.com/CSS/pr_pseudo_before.asp

Saludos