Change Picture Properties After Click
June 6, 2016 12:00 AM
I have the feeling that this should be easy, but I can't see how to do it in Lectora 16. I have several pictures on the page, so when the user clicks on them, definition text is displayed. Once a user has clicked on an image though, I want to change the transparency so the image is faded and the user knows which ones they have looked at.
I could upload transparent versions of the images and use the Change Contents action to change the picture after click, or I could place a hidden transparent white box over the image and show it after click, but I just wanted to try and be a bit tidier than that and use an action that would change the existing image transparency setting.
Does anyone know how to do this?
Discussion (8)
on click add a run JavaScript with the following:
document.getElementById("HTMLName").style.opacity = "0.5";
Opacity is scaled from 0 (100% transparent) to 1 (fully opaque).
See attached example.
Darrel
I'm definitely stealing that gem @klaatu. You should share it as a template in the share section or submit it as a contest entry ;)
Same here...not lifetime, but definately renewing each year for several years now...
Especially love the SVG stuff they have now. Experimenting with that in combination with Responsive design... really really cool....
Love the effect, Math. When I posted the response I had wanted to keep it as simple as possible. I had considered doing a gray scale transition but felt it might be overkill. Jack and Carl at Greensock are amazing. I have a lifetime Business Green membership that's worth every penny. Terrific libraries, doc's, support and like here, forum members.
I continued a bit with Darrels sample. Showing the use of Tweenmax for the same transparency change. Thus being able to make an element fade over time easily. Added a few pages in this sample to explain how to select an image by class.. might help someone...
Feature request for @jvalley4735 - add action "On Click - Change object property", and that could be almost any property (width, height, Xpos, Ypos, opacity, border color, background color, font color, etc). Allow to change multiple properties at once. So you could do smth like "On Click - make image smaller, move to the left, fade out".
I've brought your idea to the developers attention.
This was from 2013, however, 95% was exactly the same back in 2009.
Discussions have been disabled for this post