I know there are three states in every image (Normal, Hover, Pressed) by which you can alter the looks of it, but I would like to swap an image from outside itself - meaning, triggering the change in its appearance by clicking another element (some other image, for example).
When working in Dreamweaver, you have the ability to give each element a unique id, and apply a “swap” kind of behavior to any element inside the html page, ‘ordering’ it to change the appearance of
another element.
I think there is probably something similar in Hype, given the fact that each element can have a unique id – but how is it done?
Do I need to create a JS function, like:
function imgOver(id) {
document.getElementById(id).src=”anotherImg.jpg”;
}
and use an On Mouse Over action to trigger it, or is there another, simpler, way?
I am not well acquainted with JavaScript either (just bits and parts I gather from the Wed), so a step-by-step example would be more than welcome.
You have to understand how Hype adds images when you drag one into the environment or add one via the chooser.
Hype actually creates and element and adds the image as a style background property so essentially if you add this code to any action then you can change the image resource.
var imgContainer = hypeDocument.getElementById('img'); // imgContainer is the element you first drag into the environment and given an ID in this case of "img".
imgContainer.style.backgroundImage = "url(${resourcesFolderName}/Pasted-1.jpg)"; // ${resourcesFolderName} is a special variable that points to your resources folder
You can run this script on any action. “Mouse Click, Mouse Over, etc”. So long as the imgContainer is set using the ID or the element you want to change you can also run this on any other element.
Hype actually will choose either the background-image CSS property or using the <img> tag depending on different environment/browser factors, so neither setting the .src nor the style.backgroungImage will work all the time. The correct solution is to use the setter API:
var imgContainer = hypeDocument.getElementById('img');
hypeDocument.setElementProperty(imgContainer, 'background-image', "${resourcesFolderName}/Pasted-1.jpg");
Oh whoops, I’m sorry, I’m totally ahead of myself! This feature hasn’t yet been released… Uhhh… it will be the correct way to do this in the next major update .
oopsy! I would have done it that way if it was available
Could you elaborate a little more on this Jonathan. In my limited testing it has always created an element and styled the image as a background image. In all 3 browsers. FF, Chrome, Safari. What would be an example of when it would use <img> or is this just a safeguard for future use?
A big thanks to all for caring to answer and, foremost, to DBear for
explaining the “under-the-hood” details of Hype on the matter (I would have
never thought, I guess…) and providing me with the piece of code that will
make my life a lot, lot easier!
A big thanks to all for caring to answer and, foremost, to DBear for explaining
the “under-the-hood” details of Hype on the matter (I would have never thought,
I guess…) and providing me with the piece of code that will make my life a
lot, lot easier!
You’re welcome. As Jonathan has stated … in the next “major update” there will be an option to use the Hype API for this so when it happens I would change your code so that you are using the API. In other words use the code above to “set” the elements property (background-image) to whatever picture you want.
