Responsive Image Hotspot Creator - jQuery tinyhotspotcreator.js Plugin

Enter Image URL:

Actions & Behaviours

responsive:

animation:

action:

trigger:

placement:

delay (show):

delay (hide):

Templates & Contents

html:

title:

content:

Styles & Skins

skin:

textalign:

shadow:

opacity:

border:

border radius:

padding:

minWidth:

maxWidth:

Custom Skin

Tooltip

backcolor:

textcolor:

bordercolor:

Popover

titleBackcolor:

titleBordercolor:

titleTextcolor:

contentBackcolor:

contentTextcolor:

Arrow

arrowcolor:

Hotspot

border radius:

backcolor:

bordercolor:

opacity:

blink:

Help instructions

Enter the image URL in input box and click submit.
After loading the image, you can click on image where ever you want to create a hotspot.
Drag/resize feature can be used to change the position and size of hotspot.
Double clicking on the hotspot loads the properties tabs where you can change the actions, skin and content for it.
On properties tabs, you can click save button to save the changes.
On properties tabs, you can click delete button to delete the changes.

HTML Code

jQuery Code

In case you want to regenerate the hotspots and add more hotspots on already created code. You can enter the previously generated code in HTML code textarea and click 'Regenerate Hotspots' button.

tinyhotspotcreator.js Plugin v3.0