how to place image inside another image on buttonclick in javascript

Question

i have a class boxright with backgrround image of cave

i have a button which on onclick it points to function ontop() which reset the backgroundimage of boxright to an image cheetah

i want the cheetah to appear on top the cave, ie on buttonclick i want the cheeteh to appear inside the cave

How to achieve this?

function ontop()
{
var d=document.getElementById('a').style.backgroundImage="url(https://i.ibb.co/0DvMRj4/wcheetah.png)";
console.log(d);
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  
  width: 14.0vw;
  height: 40.0vh;
  
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image indide cave</button>

@prashant-pimpale on buttonclick i want the cheetah to apper inside the cave — geek
– geek, Commented Dec 5, 2018 at 5:58
@%d7%9c%d7%91%d7%a0%d7%99-%d7%9e%d7%9c%d7%9b%d7%94 wanto position cheetah so that it appear inside the cave — geek
– geek, Commented Dec 5, 2018 at 6:00

לבני מלכה · Accepted Answer · 2018-12-05 06:05:36Z

2

on click add class to div that in css add pseudo element with the image

function ontop()
{
   document.getElementById('a').classList.add('cheeteh');
}

.boxright {
  position: absolute;
  top: 48.3vh;
  left: 50.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor:pointer;
  border:2px solid black;
  background-image:url(https://i.ibb.co/cYnc1Ky/kisspng-cave-euclidean-vector-illustration-vector-cave-5a7a360b205458-5617697615179586671324.png);
  background-repeat:no-repeat;
  background-size:cover;
  
  }
  .cheeteh:after{
    content: "";
    position: absolute;
    top: 50%;
    background-image: url(https://i.ibb.co/0DvMRj4/wcheetah.png);
    z-index: 4;
    width: 50%;
    height: 50%;
    background-size: 100% 100%;
  }

<div class="boxright" id="a"></div>
<button onclick="ontop();">place another image on top</button>

answered Dec 5, 2018 at 6:05

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

geek Over a year ago

@%d7%9c%d7%91%d7%a0%d7%99-%d7%9e%d7%9c%d7%9b%d7%94 psedo element works perfect... great information brother

לבני מלכה Over a year ago

happy to help and I am sister ;)

Collectives™ on Stack Overflow

how to place image inside another image on buttonclick in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related