Can I show/hide overlapping images based on a selection

I'd like to locate multiple png images of same sail in same place on form, each showing different colors.  Per customer selection in a different field, I'd like to show appropriate image with selected color and hide the others.  Is there any way to put multiple images in same spot on a form?

I want to do this on 3 of my forms.  The simplest example would be:

http://www.jotform.com//?formID=50756726233154

I believe this would be achievable using conditional logic, but I wanted to ask you first if you have considered using our draw on image widget?

Something like in this form: http://form.jotformpro.com/form/50844565392967

Let us know if this would be a viable solution for you.

Thank you.

Thank you for your answer.

Regarding my original question of positioning multiple images in the same place and showing one or more conditionally-  I understand that I can show an image conditionally.  What I don't know is if (and if so, how) the images can be placed on the form so they overlap each other completely.

Thanks.

Hi,

I'm not sure if the conditional logic is already enough, but here's a sample form that I made: http://form.jotformpro.com/form/50845846034963?.

So there's a selection, the images are shrink so that they can be placed in one line. Options corresponds to specific images. 

You could have an alternating effect when an option changes by making sure that the sizes of the images are the same and they are placed in one line. Here's the guide on how to position the fields: http://www.jotform.com/help/90-Form-Field-Positioning.

I hope that gives you an idea.

For the concern regarding the Draw an Image widget, I've opened a new thread for that, you can refer to this link: http://www.jotform.com/answers/541443.

Kind regards.

Hello,

   My question is not about showing things conditionally, but if/how I can put one image in the exact same spot as another on a form.  I don't mean next to it or on the same line, but in the exact same spot.  I would use png images that were transparent except for the color panel I wanted to show over the basic sail underneath. 

Hi,

Please clarify exactly what is the requirement.

I am sorry, it is very confusing as to what exactly it was needed.

The description of your requirement have been contradicting and confusing from the original description.

It will help if you can provide a screenshot also.

From what I understand on your latest statement, it seems you only need edited images using transparency layers. You can do this on images using image editor.

So if you have multiple images with different degree of transparency, you wanted them to be on top of each other? Please confirm if this is what you mean.

If it is, you can move the images and put them on top of each other using injected CSS code.

BUT I do not really understand what would be the purpose of having images on top of each other on the form. 

Please provide more explanation and we will do our best to help achieve the requirements.

Thanks.

I want to have the image of a white spinnaker sail in a given spot.  There are panels in this sail that the customer can elect to have in different colors.  So, I'd have additional images (that I would show conditionally) of the identical sail that would be transparent except for a given color in a given panel. It would appear perfectly overlapped with the basic white sail. Examples of the bottom image and one possible overlaying image appear below. Note that they'd need to be transparent as they are in the original  png files. These are showing up with white in transparent areas.

I don't know how to use the image editor to keep the transparent parts and I don't know how to use CSS to put the images in the same spot.  I could use help doing those things.

Thank you!

Hi,

So far this is how I understood it.

You have the main image, which should be all transparent. 

You have then an image with specific color on them (I assume the other parts would also be transparent aside from the one with color).

They will overlap each other to display which part of the spinnaker will have a color, depending on the conditions, I assume that this is the panel options.

To do that here are the following things that I can think of, but because we don't have all the necessary items I'm unable to test it on my end:

1. Make sure that the main PNG has a transparent background, not white, because we want to have an overlapping effect. The white background can be added by CSS.

2. Make sure the the other PNG also has a transparent background, except for the part that has a color on it.

3. Positioning them strategically and using conditions will create a transition effect. Unless you really want to position them specifically, you can do that by using custom CSS code. Example is this one:

image {

position: absolute;

top: 90px;

right: 100px;

}

We can test that if you can finalize the images that you will bee needing.

Here's an example of a form using the images you shared on your last post: http://form.jotformpro.com/form/50855734810962.

This works in a way because we have only one option, what if we have many option color selected? This is where the transparent background will be needed and the positioning them on a exact location. But we will need more images and they should be transparent already so that we can test it.

Kind regards.

Yes!  This is what I want.  Thank you!  I just need more help to make it happen.

The first image is a white sail with the panels delineated and a transparent background.

Then, there will be one image for each possible color that panels 1 a & b can be.  The one I used in the above example has red in those panels and is transparent everywhere else.  

Next, there will be one image for each possible color that panels 2a & b can be... and so on for all 9 panels. 

I see how to assign an absolute position to the image in CSS above, but how can I find out how many pixels it is from top and left to a specific point in my form?

I made a test form (below) that has the bottom image and first colored panel image.  (Both are png files. Once I know where to place the red panel image so that it will overlap the basic image, I can add all the rest and the conditions that will control when to show any of them.   (I not only need to know where to locate the images on this test form, but how to find out the position of an image on any other form so I can do the same thing elsewhere. I may have multiple such image stacks on a single form as well.

Thanks so much for your help.

http://www.jotform.com//?formID=50454935865162

Thank you for providing us with more details.

I also now understand your requirement.

Then, there will be one image for each possible color that panels 1 a & b can be. The one I used in the above example has red in those panels and is transparent everywhere else. 

Next, there will be one image for each possible color that panels 1a & b can be... and so on for all 9 panels. 

However, the statement above is exactly the main challenge that will need to be overcome here. In the end result.. it may not be worth the trouble going into this option.

You will need to create a lot of conditional statement and images(panel) for each color combination you wanted to be visible at a given possible color selection

--

Our colleague Raul had mentioned the options right from the start.

I believe this would be achievable using conditional logic, but I wanted to ask you first if you have considered using our draw on image widget?

If you check my screenshot below, I have illustrated on how it will be theoretically.

I have created a test form here http://www.jotformpro.com/form/50856638089974 with Draw on Image widget on it so that you can at least test how it works.

Please let us know of your feedback on this.

We will wait for your response.

Thanks.

Yes, I considered the Draw on Image widget at Raul's suggestion.  The main problem with using it is that I'd need to restrict the colors available for selection to the ten shown above.  Also, I'd need to show the color chosen for each panel in the email generated at form submission.   Finally, I'd need to further restrict color selection to just red, white, or blue when the customer picked the cheaper sail option. I see no way to determine which color was chosen via the picker (other than visually) to support any such validation.   And, in the end, this approach looks nowhere near so good as mine.

I well understand that my approach for the sail above means creating and loading 90 images as well as defining 90 conditional statements.  The images also would all have to be located at the same absolute position with injected CSS.  I have other spinnaker sails that have even more panels or available colors which would require an even greater number of images and statements.   Thus, I'm looking for a way to load images in bulk into my account and a way to duplicate a set of conditional statements vs. one at a time. 

And I still have my original question: how can I find out how many pixels it is from top and left to a specific point in my form?  I managed to do it on my test form with trial and error, but it will be harder on my real forms where the images need to be far down on the form.

Thanks for  your help.

Well, as you mentioned your approach would require a lot of images and conditions which, at first sight, seems to me like a lot of work.

Thus, I'm looking for a way to load images in bulk into my account and a way to duplicate a set of conditional statements vs. one at a time. 

To load your images, you can create a form with a multiple upload field so you can upload multiple files at once, but you need to consider that free accounts are granted with 100MB storage. Regarding the conditional logic you need to create each condition one by one to make sure your form works correctly and also you need to consider that the more conditions you have in your form the more time it will take to load completely (same goes for the images) which means that when your form is loaded for the first time it can take a large amount of time to load which can cause issues if your users don't wait until the loading process is finished.

how can I find out how many pixels it is from top and left to a specific point in my form? 

That depends on where the image will be shown, so basically you need to go with the trial and error method as you did in your test form and if you make any updates in your form that would affect the position of the image you would also need to update the top and left values accordingly for each image.

As mentioned, it would required a good amount of work for this to work correctly using conditional logic.

I did a little research and found this JQuery library: http://intridea.github.io/sketch.js/ that I think you could use to accomplish this since you can control the color palette in it. Thought you might want to take a look at it. To use it, you would need to use the full source code of your form.

Hello,

You: "To load your images, you can create a form with a multiple upload field so you can upload multiple files at once"

I don't need to allow a form USER to upload multiple files, which the  "multiple upload field" supports, but I myself want to upload multiple images at once to appear (conditionally) on the form.  i.e. I want to upload all the wee png files with the color panels to be presented on my form without having to do it one at a time.  I'm hoping there's some way to upload en masse to my account so that I'd just have to pick from existing images one at a time when I added each image to the form.  I need to upload a few hundred tiny files (each is < 10kb) so it would really help.  Even with this ability, the tasks to add each image to the form, position each at the same absolute point, and add conditional show logic for each one will take me many hours to do. 

I do not want to use the full source code method so I'm not interested in the sketch.js you suggested.  Also, it would not produce anywhere near so good looking results as my approach.

I do appreciate your trying to suggest other ways to make this easier for me.  If you can identify some way for me to upload images to my account in bulk, however, that would be a very great help. 

Hi, 

It is possible to use your account for storing these images, however, it will affect your storage limits. The idea is to create a form in your account where you can upload images. After that, you can use that images for your widgets.

Please check my answer to this thread: http://www.jotform.com/answers/518207#518213.

Hope this helps. Thank you.

Ok. I see.  Thank you.

Please note that each of the images I'm thinking of uploading is about 8kb.  If I uploaded 500 of them, it would only be 4mb out of the 100 mb I get for free, right?  

 If I uploaded 500 of them, it would only be 4mb out of the 100 mb I get for free, right?  

This is correct. The resolution is feasible I believe. =)

Please let us know if you need further assistance on this.

Regards,

Thanks!  I recommend that you amend the title of this thread to:

Thank you for the suggestion. I agree also. 

I just did now as suggested. Question/Title changed appropriately.