4

Necesito cambiar el valor background-imagen de una etiqueta IMG:

<img style="z-index: 999; overflow: hidden; margin-left: 1px; margin-top: 1px; background-position: -43.0385px -342px; width: 312px; height: 378px; float: left; cursor: default; background-repeat: no-repeat; position: absolute; background-image: url("https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/885830-1.jpg&w=1080&h=720&far=1&bg=ffffff&q=99"); top: 0px; left: 0px; display: none;" src="mifondo.jpg">

¿Cómo podria modificar yo background-image que está dentro de style y style está dentro de la etiqueta IMG con jquery o javascript?

2 respuestas 2

6

Tendrías que hacer referencia a la imagen desde Javascript y, desde allí, acceder a la propiedad backgroundImage para poder cambiarsela. Supongamos que le pones el id imagen.

Sería así:

Mediante Javascript

var imagen = document.getElementById("imagen");
imagen.style.backgroundImage = "url('tuUrl')";

Nota: Ten en cuenta que backgroundImage va junto para poder modificarlo desde Javascript.

Mediante JQuery

$('#imagen').css("background-image", "url(tuUrl)"); 
3
  • Esta es la etiqueta bro, lo hice pero no funcionó. <div style="z-index: 999; overflow: hidden; margin-left: 1px; margin-top: 1px; background-position: -340.731px -24.6607px; width: 312px; height: 378px; float: left; cursor: default; background-repeat: no-repeat; position: absolute; background-image: url(&quot;dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/…); top: 0px; left: 0px; display: none;" class="zoomWindow">&nbsp;</div>
    – RubxnMC
    el 7 dic. 2017 a las 13:12
  • @RubxnMC ¿Cómo ejecutas el Javascript/JQuery? el 7 dic. 2017 a las 13:32
  • javascript, pero ya funcionó bro.. ¡GRACIAS!
    – RubxnMC
    el 7 dic. 2017 a las 14:53
1

Con jQuery deberías utilizar el método css:

$imagenObj.css('background-image', 'url("http://....")');

Con javaScript lo harías a través de la propiedad style:

imagenObj.style.backgroundImage = 'url("http://....")';

Ten en cuenta que seguramente tengas que cambiar también la propiedad backgroundPosition:

$(function(){
  $('#cambiar').click(function(){
      $('#imagen').css('background-image', 'url("https://vignette.wikia.nocookie.net/despicableme/images/0/06/Daveault2.png/revision/latest?cb=20130911160410")');
      $('#imagen').css('background-position', '0 0');
  });
});

document.getElementById('cambiarjs').addEventListener(
  'click',
  function(){
    var imagen = document.getElementById('imagen');
    imagen.style.backgroundImage = 'url("https://images-na.ssl-images-amazon.com/images/I/41sEBuTV6KL._SL500_AC_SS350_.jpg")';
    imagen.style.backgroundPosition = '0 0';
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img style="z-index: 999; overflow: hidden; margin-left: 1px; margin-top: 1px; background-position: -43.0385px -342px; width: 312px; height: 378px; float: left; cursor: default; background-repeat: no-repeat; background-image: url('https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/885830-1.jpg&w=1080&h=720&far=1&bg=ffffff&q=99'); top: 0px; left: 0px;display:inline-block" src="mifondo.jpg" id="imagen" />

<button id="cambiar">Cambiar jQuery</button>
<button id="cambiarjs">Cambiar javascript</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.