changing images on mouse click

Anthony Hall shared this question 7 years ago
Answered

I've been trying to figure out how to change images based on a mouse click. Is there a way to do this? I looked through the tutorials and the knowledge base and I don't see anything related.

Comments (8)

photo
1

I think you will need to be more specific. You could either create an onclick - change style event and change the background image of a rectangle for instance or create an onclick-setvalue on an image widget and set an image file as the new image.

photo
1

I think you may have it with the onclick-setvalue


Can you provide an example of this?


I was able to get something going but it is not good or elegant in any way.

photo
1

So what I have working in Prototyper when I go to simulate does not work when uploaded to Usernote.


My concept was similar to what you mentioned about changing images on click via hide and changing styles, but that requires 2 clicks, 1 to hide, 2 to change the style so this is not optimal at all. I need it all to happen on a single click. Additionally, there is the issue that it will not work on usernote.


Any ideas.

photo
1

Okay, after more looking and playing I was able to get this to work with adding additional actions to my interaction. That was not totally intuitive but once I figured it out it went good. Same problem still exists. These functions work really really well when the prototype is local. Once I move it to usernote it breaks.


Let me know if you want the file and I'll forward it to you.


Adding some images for support.


In the simulator, everything works.


79dc06498688a247742ad786b92a5695


The HTML export on local machine changes the table cell size but the image I'm changing to gets masked for some reason and only a portion of the image shows.


Usernote just doesn't handle the file at all. no images or anything. The cell size changes but thats it.


photo
1

So bad... please send me the prototype and we will run some tests on it.


Thanks and sorry.

photo
1

Sent. Thanks.

photo
1

Using set value for an image widget causes the generated html code to reference the actual local file of your computer, so if you upload to Usernote, the images will not load because they are local to your computer. This is bad design by JIM, and should be fixed.


The workaround is to use hide/show of image widgets, which requires annoying extra effort, but then all images will be uploaded and available for all Usernote testers.

photo
1

Ok, aknowledge and working on it.