Imagen con css

[adexedl]

Hola amigos, se puede intertar una imagen con css pero que esta imagen no aparezca como background, sino como imagen. Saludos.

[JavierB]

Hola adexedl

Que yo sepa no se puede. Si nos explicas mejor qué es lo que quieres hacer, puede que alguien te sepa orientar.

Saludos,

[adexedl]

Hola Javier, pues lo que quiero hacer es un rollover en un boton, y que este boton este compuesto de una imagen a la izquierda y un texto y que en estado de hover cambie la imagen de color por ejemplo. Saludos y gracias.

[mvillal]

Si te entiendo bien, lo que quieres es hacer un efecto rollover con imagenes y con css. A lo mejor algo así te puede interesar:

w w w.tierradenomadas.com/rc001.phtml (sorry, no puedo aún linkear pero juntas las w). Está horrorosa la imagen pero la lógica queda clara.

A veces es buena elección usar css para este efecto, menos código y no dependencia de js en tus web.

Saludos

[adexedl]

Hola Mvillal, ante nada gracias x responder. Lo que quiero hacer es eso pero imagina que lleva un texto html a la izquierda. Quizás no se pueda hacer, pero por intentarlo que no quede, jeje. Un saludo campeón.

[mvillal]

Hola, espero que te sirva esto, lo hice bien apurado porque en Chile con las 8 am y me estoy yendo al trabajo

Para ser honesto, lo re re re adapté por enésima vez de alguien que me lo enseñó en un foro, hago la aclaración.

Mira, no soy experto por lo que pido a algún amigo con más trayectoria que lo revise y lo corrija (JavierB por ejemplo con su impresionante cantidad de mensajes, felicitaciones!!!, esa si que es voluntad de ayuda).

Esto que hice es un menu hecho con una lista, con tres botones, con lo que tú querías, una imagen en el fondo (acá es una sola que se ubica arriba o abajo, allí está el efecto, por lo que no hay demora en la carga como en javascript) y un texto html alineado a la izquierda.

El html:

Código:

<ul id="menu">
   <li><a href="index.html" id="inicio">Inicio</a></li>
   <li><a href="empresa.html" id="empresa">Empresa</a></li>
   <li><a href="servicios.html" id="servicios">Servicios</a></li>
</ul>

Y el css:

Código:

ul#menu {  
	list-style:none;
	margin:1px 2px;
	padding:0;
	}
ul#menu li {
	padding:0;
	float:left;
	}
ul#menu li a {
	display:block;
	width:145px;
	height:75px;
	text-decoration:none;
	}
ul#menu li a:hover {
	background-position:bottom;
	}
ul#menu li a span {
	display:none;
	}
#inicio {
	background-image:url(imagen.jpg);
	}
#empresa {
	background-image:url(imagen.jpg);
	}
#servicios {
	background-image:url(imagen.jpg);
	}

Puedes ponerle a cada botón una imagen diferente pero la gracia es que la mitad de arriba tiene que ser de un color y la mitad de abajo de otra, lo haces con tu programa gráfico favorito. Acá todos tienen como vez una sola imagen de fondo de 145*175 px.

Me faltó ponerle estilo a los textos de la izquierda (voy a llegar atrasado pero allí tú le pones tu cuento.

Saludos y espero haber sido útil.

[adexedl]

Muy bueno amigo, justo lo que necesitaba, lo voy a tocar un poquito y listo. Eres un crack. Saludos

[mvillal]

Me alegro que te haya servido...