Copy image from one element to another

Using JavaScript with Hype
1

I have tried :slight_smile:

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

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

What is the correct syntax please.

Cheers

Steve Warby

2

Hi,

The getter setter API can only set or get

‘top’
‘left’
‘width’
‘height’
‘rotateZ’
‘scaleX’
‘scaleY’
‘opacity’
‘z-index’

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.

3 Likes
3

@classic12

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;
}
4

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?
Cheers

Steve Warby

tshirtLogo.zip (1.1 MB)

5

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 2.zip (1.1 MB)