Show Image after button pressed

Using JavaScript with Hype
2

Change the car image to a Rectangle with no image. Give it an id. in this case buttonPressed_3

Then we do a few things from here in the code we get the rectangle by id, and we set it’s background image size (yes even though it does not have one yet)

we then either set the background image or remove it depending on the conditions from before.

//-- This uses the elelemnt id and class names. Element's id is the image name withou extension
  
 var status = element.className.includes('off');

var buttonPressed_3 = hypeDocument.getElementById('buttonPressed_3'); //-- get the image holder rect
buttonPressed_3.style.backgroundSize = "100% 100%" //-- set image size in holder rect
 
status == false ? (

   hypeDocument.setElementProperty(element, 'background-image', '${resourcesFolderName}/' + element.id + '1.png'),
   
   hypeDocument.setElementProperty(buttonPressed_3, 'background-image', ''), //- blank the image
   
   element.classList.add('off'), 
    element.classList.remove('on') 
) : (
    
    
 hypeDocument.setElementProperty(element, 'background-image', '${resourcesFolderName}/' + element.id + '2.png'),
 // 
 element.classList.remove('off'),
  hypeDocument.setElementProperty(buttonPressed_3, 'background-image', '${resourcesFolderName}/ButtonPressed_3.png'), //- show the image
  element.classList.add('on') //-- this class has css for the shadow in the head  
);

PressPressed_v2.hype.zip (33.4 KB)

If JS is beyond you at the moment you really should go through the Hype Documentation as I have suggested before.
A some of what you want to do can be done without JS.

PressPressed_v3.hype.zip (43.0 KB)

If you do need JS search the site for links to JS learning resources. I think there is a sticky. Just learning the basics will not only help you understand some of the code but also make it easier for you to learn how to search for an answer on the web because you will have a better idea of what you need to put in the search field.

And some of it is pretty obvious
search for ’ javascript change back ground image ’ Google may even try and help you by suggesting ‘javascript change background image’

2 Likes