Discussion on addDot - The jQuery Plug-in for Adding Hot Spots


dotdesign_in supports this item


37 comments found.


Great plugin! really useful, is there a possibility of adding an unordered list for example, with hyperlinks that can click to view the hotspots (as well as having the normal js hotspots over the image).

So essentially you have the main image with hotspots and a list to the side which also control the hotspots.

Thanks Mike

Hi Mike, I will take a look at it.

How do you install this Is this for wordpress? thats what i thought

You need to assign DIV ID / Class and initiate plug-in.

Has anyone tried to switch the background image onclick? To highlight the section of the image the user has selected?

I will take a look, can you send me HTML-CSS? you can send to dotdesign.in@gmail.com

I will take a look, can you send me HTML-CSS? you can send to dotdesign.in@gmail.com

Hi, I have send you email with proper notes and updated files. I am pasting same notes here, might be useful for others.

1. Load jQuery plug-in on Load event. $(window).load() not in $(document).ready() 2. With attached file, I have updated one css class in “addDot_styles.css”, I have updated “overflow: auto” in .labelTxt{} class. 3. Add “withinBoundary: true” option in all dot initialization

Thanks, DotDesign.in


I cannot get this to work. followed instructions, and nothing. The best I can get it to do is display a blank car pic, but that is all. no spots or anything.


There might be JS error. Can you please make sure, you have added jQuery API first then addDot jQuery plug-in js?

Can you check demo files? If you don’t get it through, send me your demo HTML. I will take a look and help you out.

Thanks, DotDesign.in

Hi, is it possible to use something like this with image mapping? for example:

<area shape=”rect” coords=”22,83,126,125” alt=”tag here?” href=”/html/index.htm” target=”_blank” />


Not sure, need to try it out. Are you facing any issue with that?

in looking for something like that, but im sure if this would work with addDot, is it possible that you can test this before i purchase?

So to answer, addDot plug-in will work like this. You can add hotspot on image by defining X & Y position and by clicking that hotspot you can show information into box.

Now if you want to redirect, certainly you can add a link into content box.

Thanks, DotDesign.in

Great script. Here is an issue I am seeing. When I try to open the text box as openDirectionH: ‘rtl’, the script seems to ignore the width value that I put in the custom.js. I have the width: 200, but the text box opens only about 90px. Width works fine when the direction to open is left to the default value. My work is at http://www.cityofpriorlake.com/finance_water_bill_sample_new.php. thanks in advance

Hi, I will take a look into issue.

thanks. I think it has something to do with the distance from the leftPos value in the custom.js to the right edge of the image. See the files http://www.cityofpriorlake.com/test-bill.php and http://www.cityofpriorlake.com/test-bill2.php. In http://www.cityofpriorlake.com/test-bill2.php, the image that the script is working on is 650 pixles wide (and then mouseover red circle #2—see that the textbox is skinny even though it is set to 320 pixles in the custom.js). In http://www.cityofpriorlake.com/test-bill.php, the image is 850 pixles wide and the box is extending to the full 320 pixels in width to the left.

so in the .js there must be an equation that is measuring the width of the image – leftPos value to replace the maximum width of the textbox? It appears to reduce the width available for the textbox regardless if you are going rtl or ltr.

The difference in both is label will not go out of image boundary as per option set. I have checked, if you set width and if you have direction: rtl it is expanding description box as per width applied.

Hi, It would be possible to integrate a plugin like lightbox (example: prettyphoto) for photos inside the hot-spot? Thanks, martinmilizia@gmail.com

Yes definitely it’s possible.

Hi does the tooltip content area support Youtube Embed code?

Hi Crystalballltd,

Yes you can add YouTube Embed code. To demo you, I have updated preview demo of plug-in. Please check out, http://codecanyon.net/item/adddot-the-jquery-plugin-for-adding-hot-spots/full_screen_preview/1860111

Thanks, DotDesign.in

Can this be added to a Drupal 7 site?

If you are familiar with how to initialize any jQuery plug-in, then yest for sure you can use it in Drupal. But this plug-in is not installable plug-in for WP or Drupal.

Thanks, DotDesign.in

Hello, i would lie to know how can i put this code in a wordpress website


Hi Strevilly,

Thanks for purchasing plug-in. What you can do, add jQuery.js, addDot plug-in js into common header section and define plug-in on

$(‘window’).load(function(){ define your hot spots here });

Regards, DotDesign.in

Hi, is it possible to hide the button so that it is only revealed when people mouse over the position of the button ? thanks M

Hi Michael,

With existing plug-in that’s not taken care of. Because if user won’t be able to see any hotspot on image, they will never hover on that area. Your requirement might be unique.

You can modify existing code if you want to try out.


Hi.. Is it possible to replace the image for a swf …


Hi Destiny,

From your comment looks like you are referring to my another plug-in which shows image in place holder Show Image in Placeholder/Target Box – jQuery which is targeted only for images.

You have posted comment in addDot – The jQuery Plug-in for Adding Hot Spots which allows you to show SWF file.

Hope this answer your question.



I have my project working fine, but I was wondering if its possible to have BOLD text for first word title..

Also, the extrem right hotspot that need to go left seem to have an issue.. I set it to a size but but does’t seem to change.. What might I be doing wrong…

$(’#addDot_demo_auto’).addDot({ leftPos: 550, topPos: 220, label: ‘My Text Here = to a few lines of text.’, showOnLoad: false, aniType: ‘slide’, aniSpeed: 0.75, width: 400, withinBoundary: true, boundaryPadding: 5, openDirectionH: ‘rtl’, openDirectionV:’up’, showOnlyOne: true });

I would like to place a hotpot button at the top left of my small web page which will be used to open inside an iframe.. What I would like to ask if its possible for the YouTube option to open auto automatically so when the viewer opens the iFame the YouTube video frame will expand automatically…. The user can then press play…

Thank you..

Auto open option with animation is not available. But when user will land on page hotspot can be opened. I have provided that option in documentation.

Thanks, DotDesign.in

Hi.. Can I add a URL with the text…


Yay.. Its works… Thank you..

Now I have just one more issue with that.. The URL is dark purple.. How can I change this colour to be more clear depending on the background colour of the dot when opened..

I give this product 5 stars for quality and customer support..


Hi Destiny,

For that you will have to add class Click Here

And add CSS class in .css file.

color: #fff; /* You can give any color that you want to apply */

Thanks for the 5 star rating. Thanks for the appreciation.


To be honest, I did not understand any of that but amazingly I worked it out.. and it worked! ;)

Thank you for all your help..

before i buy this , i have one question wanna ask , is this working with http://codecanyon.net/item/wowbook-a-flipbook-jquery-plugin/1791563 ?

Hi Denis,

Thanks for showing interest in buying plug-in. The plug-in you have mentioned is developed by someone else, I don’t have that plug-in with me otherwise I would have tested. But there shouldn’t be any problem plug-in should work in above mentioned plug-in.


Hello, Can I use this plugin with magento 2?

Hi, this is a jQuery plug-in. If you are aware about coding, you can add this plug-in to magento 2. But if you wanted ready to use magento plug-in, it is not.

Thanks, DotDesign.in