Back Ground Picture with hot spot

Hi,

I’m sorry, but it is not possible to insert other shortcodes into the form fields. The majority of plugins includes its own javascript code, the same programming language used by the CFF for rendering the forms, and injecting the code of third party plugins can brake the forms.

A possible solution would be import the code after rendering the form, for example, suppose you insert the shortcode directly in the webpage into a DIV tag, as follows:

<DIV id="thirdParty" style="display:none;">[annotator_pro name="atrium-4"]</DIV>

and then in the form, you can insert a “HTML Content” field, with the piece of code:

<DIV id="myContainer"></DIV>
<SCRIPT>
setTimeout(function(){
jQuery('#myContainer').html(jQuery('#thirdParty').html());
}, 5000);
</SCRIPT>

Best regards.

Thanks,
A) I have inserted to the web page as text (not visual)
<div id=”thirdParty” style=”display: none;”>[annotator_pro name=”atrium-4″]</div>
[CP_CALCULATED_FIELDS id=”22″]
B) I have inserted into the calc. field HTML Content
<DIV id=”myContainer”></DIV>
<SCRIPT>
setTimeout(function(){
jQuery(‘#myContainer’).html(jQuery(‘#thirdParty’).html());
}, 5000);
</SCRIPT>

When i preview at the related web page, I only get “hotspots” but no background page as original?
Thanks

Hi,

Could you send me two links, please? One link to the current web page, and another one to a webpage with your code as should be displayed.

Best regards.

Hi
Thanks
Please find the related pages
https://www.teknoyangin.com/atrium-only/

Calc & Hot Spot
https://www.teknoyangin.com/shevs/atrium4/ (triple)
https://www.teknoyangin.com/shevs/atrium3/ (single)

Best Regards

Sorry “triple & Single” hotspot are all triple hotspots. ?t does not
work with single hot spot either.

Hi,

I’ve never used the [annotator_pro], but I guess the issue may be related with the visibility of the container. Please, try it again, but this time, instead to use

display:none;

replace it by

display:block;

Best regards.

Great, it works now!!
I will now check if i can change related each hotspot picture for each “fieldset” or “Div”. I hope it goes smooth.
Thanks

Hi
Good Morning
Thank you. It works now for multiple hotspot pictures with two minor
issues.
https://www.teknoyangin.com/atrium-9/
– there is one combined pictures unnessary.
– one picture out of line.
Any recommendation?
Thanksin advance

1) I have ammended the html page as follows
[CP_CALCULATED_FIELDS id=”23″]
<div id=”firstParty” style=”display:block;”>[annotator_pro name=”atrium-1″]</div>
<div id=”secondParty” style=”display:block;”>[annotator_pro name=”atrium-2″]</div>
<div id=”thirdParty” style=”display:block;”>[annotator_pro name=”atrium-3″]</div>
<div id=”fourthParty” style=”display:block;”>[annotator_pro name=”atrium-4″]</div>
<div id=”fifthParty” style=”display:block;”>[annotator_pro name=”atrium-5″]</div>
<div id=”sixthParty” style=”display:block;”>[annotator_pro name=”atrium-6″]</div>
2) I have added related Html for each field
<DIV id=”myContainerx”></DIV>
<SCRIPT>
setTimeout(function(){
jQuery(‘#myContainerx’).html(jQuery(‘#xxxParty’).html());
}, 5000);
</SCRIPT>

Hi,

The issue is caused by the use of columns. I recommend to display the fields: “HTML Content”, on their own rows. Select the “HTML Content” fields, and assign to all of them, a custom class name, for example: myclass

Note: The class names are assigned through the attribute: “Add Css Layout Keywords”. To assign multiple class names to a same field separate them by blank characters.

And finally, in any of the “HTML Content” fields, adds the piece of code:

<style>
.myclass{clear:both !important;}
</style>

Best regards.

Thanks
I have added styles for each field as above.
“HTML Content”, are already on their own rows.
I understand the shifting of the picture due to the two column
and can be solved by using styles.
How about the issue of unnecessary combined pictures at the
bottom . I would like to remove those 6 pictures at the bottom?
Thanks

Okey. replacing display:block;” by display:none;” solves
Thanks

Hi,

Perfect, however I’ve never used the shortcode included in your project.

Best regards.

Hi
I have now come to a solution with Image Map Pro and calculated fields. Images and hot spot are well coordinated.
However mouse selection hot spots and icons do not pop up the tool tips.
Is this something todo with calculated fields configuration or calculated field css?
Thanks

https://www.teknoyangin.com/atrium-18-final/

Hi,

If you want to move the code generated by other plugins, and preserve the events (as the mouseover), you should use different jQuery methods, in place of the “html” method, uses “clone” (https://api.jquery.com/clone/).

Best regards.