JavaScript - Asignar fondo de celda una imagen redimensionada

Asignar fondo de celda una imagen redimensionada

Publicado por mblascog (9 intervenciones) el 08/03/2013 00:59:52

Buenas,
Quiero asignar al fondo de una celda una imagen redimensionada, pero no veo la manera de hacerlo.

He creado la imagen:

img = new Image();

img.src = "c:\....";

img.width=40;

img.height=40;

Y lo que quisiera ahora es asignar esta imagen redimensionada al background, pero tal como lo hago no es correcto, y no sé como asignar la imagen redimensionada.

document.write("<td background='" + img.src + "'>";)

Me interesa usar esta imagen como background, ya que el contenido de la celda es otra imagen, y así consigo sobreponerlas.

Gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Asignar fondo de celda una imagen redimensionada

Publicado por xve (2100 intervenciones) el 08/03/2013 08:01:58

Hola mblascog, para esto que me indicas, no se muy bien como hacerlo con javascript, pero si con CSS3... seria algo así:

.miEstilo

    background:url(imagen);

    background-size:40px 40px;

    background-repeat:no-repeat;

Te recomiendo no utilizar rutas absolutas (c:\...) esto solo existe en tu ordenador, no en los ordenadores de los demás.

Espero que te sirva.... saludos

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Asignar fondo de celda una imagen redimensionada

Publicado por mblascog (9 intervenciones) el 08/03/2013 11:17:15

Gracias xve por tu respuesta. Conozco background-size, pero no funciona con los navegadores antiguos. Es que estoy dándole vueltas en cómo sobreponer una imagen sobre otra en una celda.
He provado con una capa con posición relativa:

<table>

       <tr><td><img src='images/02.jpg' width=40px height=40px>

               <div style="position:relative; top:-15px;">

                     <img src='images/04.png' width=10px height=10px>

               </div>

       </td></tr>

</table>

pero de esta forma se redimensiona la celda con la altura de la capa

Otra alternativa era si conseguía cambiar el tamaño de una imagen poniéndola como fondo de celda, pero de momento no lo consigo.
Sabes si existe otra manera de hacerlo?

Gracias

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Asignar fondo de celda una imagen redimensionada

Publicado por xve (2100 intervenciones) el 08/03/2013 11:50:13

Hola mbascog, yo lo haría con un div centrado, el cual tiene un background y enviado al fondo (z-index)
De esta manera, creo que te podría servir, siempre y cuando dejes de utilizar tablas... con tablas, no se me ocurre la manera de hacerlo sin utilizar css3.

Siento no poder serte de mas ayuda.

Valora esta respuesta

Comentar

Asignar fondo de celda una imagen redimensionada

Publicado por mblascog (9 intervenciones) el 08/03/2013 12:52:28

Hola xve, sí me ayudas, muchas gracias.
He intentado interpretar lo que me has contestado, pero no lo consigo.
Exactamente lo que quiero hacer es esto:

Las camisas son unos archivos que leo en tiempo real de un directorio. A veces hay 1, otros 10, .... y según unas condiciones, a veces quiero visualizar el punto rojo, otras no.

Si lo hago con div sólo, me pasa lo siguiente:

La capa del punto rojo, a pesar de desplazarla para arriba, ocupa espacio.

Y como lo puedo hacer para que los div salgan horizontalmente y no verticalmente?

Gracias.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Asignar fondo de celda una imagen redimensionada

Publicado por xve (2100 intervenciones) el 08/03/2013 17:15:06

Hola, te recomiendo revisar un poco el tema de los estilos, con ellos, puedes hacer mucho... por ejemplo, para poner dos div's de lado:

<div style='clear:both;float:left;'>

</div>

</div style='float:left;'>

</div>

Aquí tienes un ejemplo de como puedes hacerlo con css2:

<!DOCTYPE html>

<html>

<head>

<style>

.line {

    clear:both;

    padding:5px;

.contenido {

    position:relative;

    float:left;

    margin-left:5px;

    background:url(http://www.lawebdelprogramador.com/logolwp100x25.jpg);

    border:1px solid #ccc;

    width:200px;

    height:200px;

    font-weight:bold;

    font-size:22px;

.imagenPequena {

    background:url(http://www.lawebdelprogramador.com/img/rss.png) no-repeat;

    z-index:1;

    position:absolute;

    width:16px;

    height:16px;

    top:90%;

    left:90%;

</style>

</head>

<body>

<h1>Codigo que muestra como sobreponer dos imagenes en background utilizando dos divs</h1>

<div class='line'>

    <div class='contenido'>

        texto1

        <div class='imagenPequena'></div>

    </div>

    <div class='contenido'>

        texto2

        <div class='imagenPequena'></div>

    </div>

</div>

<div class='line'>

    <div class='contenido'>

        texto3

        <div class='imagenPequena'></div>

    </div>

    <div class='contenido'>

        texto4

        <div class='imagenPequena'></div>

    </div>

</div>

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Comentar

Asignar fondo de celda una imagen redimensionada

Publicado por mblascog (9 intervenciones) el 08/03/2013 19:07:54

Buena recomendación para poner los divs horizontalmente

Gracias
En cuanto al ejemplo que me has pasado sobre como sobreponer dos imágenes, está bien, pero sigo teniendo el problema por el cual he iniciado este post,. No hay manera de adaptar el tamaño de la imagen al div.
Quizás no me explique bien, según la imagen que he adjuntado en el post anterior, la camisa es una imagen de grandes dimensiones, y hay que redimensionarla.
Y quizás piensas que sería mejor crear la imagen con varios tamaños, pero el tema está en que hay muchísimas fotos, más de mil o dos mil.

Gracias

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Asignar fondo de celda una imagen redimensionada

Publicado por xve (2100 intervenciones) el 08/03/2013 19:52:54

Lo suyo seria que las imagenes fueran lo mas optimizado posible, ya que si muestras muchas y cada una pesa 300kb, y muestras 10 son 3 Mb que tiene que bajarse el usuario para poder ver la web... si las optimizas al tamaño necesario, podrían ocupar 20Kb lo cual son 200Kb por 10 imagenes... una gran diferencia de velocidad y trafico.

Si el usuario pulsa sobre la imagen, luego le muestra la de 300kb para que vea bien el detalle.

Espero que te sirva.

Valora esta respuesta

Comentar

Asignar fondo de celda una imagen redimensionada

Publicado por mblascog (9 intervenciones) el 08/03/2013 23:31:27

Buenas,
Sé que tienes toda la razón, pero el cliente se niega en duplicar las imágenes, dice no disponer de tiempo para hacerlo ni dinero para pagar que lo hagan.
Gracias por tu ayuda.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

imagen en un div con otra imagen encima en modo background

Publicado por xve (2100 intervenciones) el 09/03/2013 19:47:48

Puedes hacerlo de esta otra manera, aunque así, no podras poner texto encima de la imagen:

<!DOCTYPE html>

<html>

<head>

<style>

.line {

    clear:both;

    padding:5px;

.contenido {

    position:relative;

    float:left;

    margin-left:5px;

    border:1px solid #ccc;

    width:200px;

    height:200px;

    font-weight:bold;

    font-size:22px;

.contenido img {max-width:200px;max-height:200px;}

.imagenPequena {

    background:url(http://www.lawebdelprogramador.com/img/rss.png) no-repeat;

    z-index:1;

    position:absolute;

    width:16px;

    height:16px;

    top:90%;

    left:90%;

</style>

</head>

<body>

<h1>Codigo que muestra como sobreponer dos imagenes en background utilizando dos divs</h1>

<div class='line'>

    <div class='contenido'>

        <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbbuVPDNBeix_Bel8xnwHrkdyDKCS908pqyNw-YcOcQita3vSv'>

        <div class='imagenPequena'></div>

    </div>

    <div class='contenido'>

        <img src='http://img.directindustry.es/images_di/photo-g/ropa-de-trabajo-chaqueta-60744-2529215.jpg'>

        <div class='imagenPequena'></div>

    </div>

</div>

<div class='line'>

    <div class='contenido'>

        <img src='http://t0.gstatic.com/images?q=tbn:ANd9GcR3CBJ1HgMjVPs6VAbH8OlKLtMRo2iBv8QsQdANu3ub3KcI-ZZp'>

        <div class='imagenPequena'></div>

    </div>

    <div class='contenido'>

        <img src='http://t3.gstatic.com/images?q=tbn:ANd9GcT70uY-r1w8VH8S8xNSboEmWcjkDNzKHAy22sJ0KJjMe-s1RUH9tA'>

        <div class='imagenPequena'></div>

    </div>

</div>

</body>

</html>

Fíjate que por estilo indicamos que como máximo la anchura o altura de la imagen, sea de 200px..

Coméntanos si esta te vale, ok?

Valora esta respuesta

Comentar

.js y .html

Comportamiento raro de fancybox