Back Ground Picture with hot spot

Hi
Thanks. I have various html contents
As an one exampl, as follows
What do i use as a replacement .clone?
Thanks

<DIV id=”myContainer1″></DIV>
<SCRIPT>
setTimeout(function(){
jQuery(‘#myContainer1’).html(jQuery(‘#firstParty’).html());
}, 5000);
</SCRIPT>
<style>
.myclass{clear:both !important;}
</style>

Hi,

In reality the code you are requesting is not related directly with our plugin, however, I suggest to use any of the following code:

<DIV id="myContainer1"></DIV>
<SCRIPT>
setTimeout(function(){
jQuery('#firstParty').appendTo('#myContainer1');
}, 5000);
</SCRIPT>

or

<DIV id="myContainer1"></DIV>
<SCRIPT>
setTimeout(function(){
jQuery('#firstParty').clone( true ).appendTo('#myContainer1');
jQuery('#firstParty').remove();
}, 5000);
</SCRIPT>

But, as I said in previous tickets, I’ve never used the “Image Map Pro” plugin.

Best regards.

Hi
Unfortunately, no picture reflected for the first page.
Rgds

Hi,

The issue is simple. If you’re cloning the fields, or you’re moving them with the appendTo instruction, you’re creating an exact copy of the elements, with their properties and styles. If the initial elements are hidden, their copies are hidden too.

So, the code in this case should be modified a little, as follows:

<script>
setTimeout(function(){
jQuery('#firstParty').appendTo('#myContainer1');
jQuery('#firstParty').show();
}, 5000);
</script>

Best regards.

Wow
It is working now.
Great. Thanks
DOgan

Opps.
Tool tips working. But I only see the picture
I also need a change in the web page?
Thanks

[CP_CALCULATED_FIELDS id=”36″]
<div id=”firstParty” style=”display: none;”>[atrium-1]</div>
<div id=”secondParty” style=”display: none;”>[atrium-2]</div>
<div id=”thirdParty” style=”display: none;”>[atrium-3]</div>
<div id=”fourthParty” style=”display: none;”>[atrium-4]</div>
<div id=”fifthParty” style=”display: none;”>[atrium-5]</div>
<div id=”sixthParty” style=”display: none;”>[atrium-6]</div>
<div id=”seventhParty” style=”display: none;”>[atrium-7]</div>
<div id=”eighthParty” style=”display: none;”>[atrium-8]</div>
<div id=”ninthParty” style=”display: none;”>[atrium-9]</div>
<div id=”eleventhParty” style=”display: none;”>[atrium-11]</div>
<div id=”twelvethParty” style=”display: none;”>[atrium-12]</div>
<div id=”fourteenthParty” style=”display: none;”>[atrium-14]</div>
<div id=”fifteenthParty” style=”display: none;”>[atrium-15]</div>
<div id=”sixteenthParty” style=”display: none;”>[atrium-16]</div>
<div id=”seventeenthParty” style=”display: none;”>[atrium-17]</div>
<div id=”eighteenthParty” style=”display: none;”>[atrium-18]</div>
<div id=”nineteenthParty” style=”display: none;”>[atrium-19]</div>
<div id=”twentiethParty” style=”display: none;”>[atrium-20]</div>
<div id=”twentyfirstParty” style=”display: none;”>[atrium-25]</div>
<div id=”twentysecondthParty” style=”display: none;”>[atrium-26]</div>

Hi,

I’m sorry, I don’t understand your question. By the way, the plugin you are using to create the hotspots images is not calculating correctly the height for tooltips, to correct the issue, please, follows the steps below:

1. Open the “https://www.teknoyangin.com/wp-content/plugins/image-map-pro-wordpress/css/image-map-pro.css&#8221; file with the text editor of your choice.

2. Go to the style definition:

.hs-tooltip.hs-tooltip-visible{opacity:1!important;z-index:3;-ms-transform:scale(1,1)!important;transform:scale(1,1)!important;-moz-transform:scale(1,1)!important;-webkit-transform:scale(1,1)!important;}

and modify it as follows:

.hs-tooltip.hs-tooltip-visible{opacity:1!important;z-index:3;-ms-transform:scale(1,1)!important;transform:scale(1,1)!important;-moz-transform:scale(1,1)!important;-webkit-transform:scale(1,1)!important;height: auto !important;}

3. Finally, clear the browser’s cache after edit the online file.

Best regards.

Okey, I have done it.

I’m sorry, I don’t understand your question.

But page structure with pictures inside the calculated fiels is still not available
https://www.teknoyangin.com/atrium-18-final/

Thanks

Hi,

You have removed the tags of containers, for example the container for the first image is not in the form:

<DIV id="myContainer1"></DIV>

If you remove the tags of containers won’t be possible to move the images to the form.

Best regards.

Hi
Now, it is working at it’s best integration.
Yes, hotspots images is not calculating correctly the height for tooltips even after modifications whether cache issue or not .
But i will check the issue with image pro.
Okey, I really appreciate you assistance.
Anyway, thanks for your great support!