Show Image after button pressed

Using JavaScript with Hype
1

Hi, I am trying to make an image appears only when the button pressed is shown.

There are two buttons “Press” and “Pressed” it toggles each time the button is pressed, the image shall be shown when the button “Pressed” appears and when this button is pressed again the first button PRESS be shown and the image disappears.
In the file attached I am using a JavaScript from this forum.
Any help is more than welcome.
PressPressed.hype.zip (39.4 KB)

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
3

@MarkHunte, exactly what I needed, I already took a look at the JS learning resources, as you had mentioned before it is very helpful, and many JS models everyone can use. Thanks a lot for your time and help. I am sure I am progressing in Hype. :wink:

1 Like