Photoshop Question posted in
The official user guide can be found here.

Changing images on Button press – Photoshop

I have this bit of code that changes multiple images on my website. Right now I can change the images once but I can not change them back to the original images. I was trying to use .toggle after my .css to change the images back and fourth but that did not work. How would I go about solving this?

  $("button").click(function(){
      $("#secriuty").css({"background-image": "url('images/certificates/secriuty-fundamentals-certificate.png')"}), 
      $("#js").css({"background-image": "url('images/certificates/js-certificate.png')"}),
      $("#html5").css({"background-image": "url('images/certificates/html5-certificate.png')"}),
      $("#html-css").css({"background-image": "url('images/certificates/html-and-css-certificate.png')"}),
      $("#photoshop").css({"background-image": "url('images/certificates/photoshop-certificate.png')"}),
      $("#illustrator").css({"background-image": "url('images/certificates/illustrator-certificate.png')"})
    });
Tags:

2

Answers


  1. 0

    Try this :

    $('.checkbox').click(function() {

  const button = $(this).parent('#button');
  
  if( $(button).find('.checkbox').is(':checked') ) {
    $("#aaa").css({"background-image": "url('https://picsum.photos/id/141/150/150')"}) 
    $("#bbb").css({"background-image": "url('https://picsum.photos/id/222/150/150')"})
    $("#ccc").css({"background-image": "url('https://picsum.photos/id/27/150/150')"})
  } else {
    $(".div").css({"background-image": ""})
  }

})
    .gallery {
  display: flex;
  flex-direction: row;
}

#aaa {
  display: block;
  width: 150px;
  height: 150px;
  background-image: url('https://picsum.photos/id/121/150/150');
}
#bbb {
  display: block;
  width: 150px;
  height: 150px;
  background-image: url('https://picsum.photos/id/121/150/150');
}
#ccc {
  display: block;
  width: 150px;
  height: 150px;
  background-image: url('https://picsum.photos/id/121/150/150');
}
.div {
  margin-right: 5px;
}
.div:last-of-type {
  margin-right: 0;
}
/* Button */
.btn {
  width: 150px;
  height: 40px;
  margin-top: 10px;
  background-color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn:hover {
  background: #444;
  color: #fff;
}
.btn .checkbox {
  position: absolute;
  left: 0;
  right: 0;
  width: 150px;
  height: 40px;
  opacity: 0;
  z-index: 999;
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
  <div id="aaa" class="div"></div>
  <div id="bbb" class="div"></div>
  <div id="ccc" class="div"></div>
</div>
<div id="button" class="btn">
  <input type="checkbox" class="checkbox" />
  <span>Change Background</span>
</div>
    Login or Signup to reply.
  2. 0

    Using .toggleClass:

    $("button").click(function(){
  $("#security").toggleClass("newpic");
});
    #security {
height: 100px;
width: 100px;
background: red;
}
#security.newpic {
  background: url("http://www.fillmurray.com/300/253");
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="security"></div>
<button>Click me</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search