menejo de css (img) con jQuery

zyon · #1 (**permalink**) 23/07/2011, 10:05

Que tal, me preguntaba si alguien sabe como manipular el tamaño de una imagen asignada a un DIV desde css:

Código PHP:

  $("#miDiv").css({color: "#3B0B0B", backgroundColor: "#FF0000", backgroundImage: 'url("../Icons/error.png")'});
$("#miDiv").css.img({width: "10px", height: "10px"});

Como ven en la primera línea, le doy color y un le doy una imagen a mi campo DIV, pero lo que me interesa es poderle dar un tamaño específico a ese "backgorundImage", lo cual intento en mi segunda línea, pero no he logrado hacer que funcione (en realidad no se si quiera si se ponga así en la segunda línea jeje), alguna idea? gracias de antemano!! saludos!

Naahuel · #2 (**permalink**) 23/07/2011, 18:45

¿Por qué no analizás mejor el código a ver si entendés lo que estás haciendo?

Estás asignando la imagen de fondo como una propiedad CSS. No se puede con CSS 2.1 cambiar el tamaño de la imagen de fondo (en CSS3 existe background-size). Una alternativa es que en lugar de usar la imagen de esa forma, hagas algo así:

Código Javascript:

Ver original$("#miDiv").css({color: "#3B0B0B", backgroundColor: "#FF0000"}).html("<img src='../Icons/error.png' />");
//y luego:
$("#miDiv > img").css({width: "10px", height: "10px"});

Se entiende? :)

zyon · #3 (**permalink**) 26/07/2011, 10:52

Hola, intente aplicar el backgrounSize y no afectaba a mi fondo de imagen y con el otro método que menciones me deformaba el div y no pude manipularlo :(

Naahuel · #4 (**permalink**) 26/07/2011, 11:05

La propiedad background-size todavía está virgen, sólo la soportan algunos navegadores modernos y con los "vendor prefixes" (-moz, -webkit, etc).

¿Te deformaba el div? ¿Podrías explicarme exactamente lo que intentás hacer? Tal vez hay una mejor forma.

Imagino que lo que querés hacer es que un div que tiene cierto contenido se ponga rojo y con una imagen de error de fondo luego de que ocurra algún error. Si es así, podrías hacer algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
  <script>
    function _demo(){
    $("#miDiv").css({color: "#3B0B0B", backgroundColor: "#FF0000"}).append("<img src='http://dsf.chesco.org/chesco/lib/chesco/images/error_icon2.jpg' />");
    //y luego:
    $("#miDiv > img").css({width: "10px", height: "10px"});
    }
  </script>
  
  <style>
    #miDiv{position:relative;}
    #miDiv img{position: absolute; left:50%; top:50%;}
  </style>
</head>
<body>
<div id="miDiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
    aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est 
    laborum.</p>
  <a href="#" onclick="_demo()">Probar error</a>
  </div>
</body>
</html>

Fijate que uso un poco de CSS para poner la imagen en algún lugar con posicionamiento absoluto. Podés también integrar esa línea de jquery que cambia el tamaño de la imagen dentro del CSS, para mejorar el código.