Copy image from one element to another

I have tried :slight_smile:

set one image id as ‘asImage’ and the other as ‘images’

var newImage = hypeDocument.getElementProperty(‘asImage’,‘innerHTML’);​

What is the correct syntax please.


Steve Warby


The getter setter API can only set or get


It does not deal with innerHTML.

Also the are a number of reasons why what you are trying to do would not work with how you think image data, paths and innerHTML works.

I would suggest you try and change the image using a timeline and changed the background Image property.
If you must do it in JS then there are plenty of examples on site and I also would suggest you research “Javascript change backgroundImage” in google.

On aside you really should read the documentation to understand how the Hype Javascript APIs work.



Hi Steve!

Is this generally what You are looking for?

function copyImage(hypeDocument, element, event) {
	var image1 = hypeDocument.getElementById('imageHolder_01');
	var image2 = hypeDocument.getElementById('imageHolder_02');
	image1.innerHTML = image2.innerHTML;

It is not working as expected.

Click on the center image on the right.
What am I missing here please?

Also how do I output the var image1 so I can see what ‘magic’ it holds?

Steve Warby (1.1 MB)

Give the images classNames and then get the array of images in the Javascript.

Use a for loop to iterate over them and change the images.

 var logoImages = document.getElementsByClassName('logoImage'); //image array

    var newImage = hypeDocument.getElementById('asImage').style.backgroundImage; //- get the background image we want.

    for (var i = 0; i < logoImages.length; i++) {
      logoImages[i].style.backgroundImage = newImage;  // change this image's background image

tshirtlogo (1.1 MB)