I’m pretty new to using Javascript and Hype 3. Any help anyone could provide would be awesome. I’m trying to come up with a way to dynamically swap image URLs out so I don’t have to export 500+ different animations for different supported languages.
In my project, the user will select a language from a button separate from the Hype 3 animation and a unique identifier will be applied to each page in the sequence of pages until the last page. My Hype 3 animations will show up on some of those pages and when they do I would like to run some javascript on page load to override some of the image URLs with images in that language.
I tried doing some research and saw one could replace an image doing something like the snippet below. That didn’t seem to do anything after exporting though:
function changeImageLanguage(hypeDocument, element, event) {
var imageSwap = hypeDocument.getElementById('kiosk-screen');
imageSwap.style.backgroundImage = "url('${resourcesFolderName}/kisok-screen_2x-russian.png')";
}
I think I would set up some kind of list or array of image URLs associated with the page language ID and then replace the assets in the animation with the assets in the array if they show up on the page. Or I could add an extension to the new images URLs to have ‘-specificLanguage’ at the end and append the ‘-specificLanguage’ to all the images I list to append it to based on the page ID. I’m not really sure which way would work easiest though.
I would like to be able to just add a JS file that isn’t within the specific animation resource folder and pull from a separate asset folder as well if that’s possible with Hype 3. That way I don’t have to re-export all my animations and just override the URLs in the current export from an external JS file. (This would save me some time but isn’t completely necessary).
Any help or guidance would be greatly appreciated! Thanks!
I’m thinking you don’t need to save the element as a variable. You can just work with the element directly.
As shown in the document, there’s a two-dimensional array to manage the multiple languages. A column could easily be the paths to the background image. Also, if you’re getting stuck, you could simply use empty elements and modify the HTML.
This is theoretical though. I haven’t had to use different images for multi-language Hype projects. Usually, I keep the text separate from the images. That way, I only have to change the text. This is better for accessibility. SEO could also benefit from using pure text instead of an image as text. Even in the sample template, I used emoji instead of images.
I would recommend checking your web developer console log and see if there is an error emitted. The most likely culprit is that the URL is wrong. If you're working with images in Hype's resource folder (as the URL implies since it is using the {resourcesFolderName} magic variable, you may need to uncheck Automatically optimize when exporting from the Resources Library for the image, because Hype may be changing the format/name.
From this quote though:
It sounds like you want a URL outside the *.hyperesources folder, so in that case you should you a .html page relative path.
The other possibility is that your code is not being triggered at all; I'd do an alert('hi') or console.log('test') to make sure it is being run.
Yet another possibility is that the ID for the element is incorrect.
