Installation
Step 1 - Load the script
To use "addDot" plug-in you have to include the required javascript files in the
<head> of your HTML document. You have to add jQuery library
and "addDot" plug-in javascript file.
<script src="script/directory/path/jquery-1.7.1.min.js" type="text/javascript"
language="javascript"></script> <script src="script/directory/path/jquery.addDot.min.js"
type="text/javascript" language="javascript"></script> Step 2 - Add your hot spots
The "addDot" plug-in is very easy to use. It provides various
options. As shown in above demos, you can customize appearance of
hot spot icons, label etc. in a way you want it. To do so you have to write HTML
& CSS to apply custom look & feel. Below are points to consider to apply custom
look to hot spots.
HTML
You have to place an image into <div> tag. And apply it unique
id because you will add hot spots through id. To make
your image into specific layouting, you can add <div>, <table> etc.
around it and you can apply CSS class to achieve desired layouting.
As shown in below code, <div id="addDot_demo_auto"> is used to
add hot spots. Outer div are for layouting purpose.
<div id="demo_box1" class="add-dot-demo-automotive"> <div class="demo-content">
<div class="automotive"> <div id="addDot_demo_auto"><img src="img/demo_img1.jpg"
alt="" /></div> </div> </div> </div> <div id="demo_box2"
class="add-dot-demo-computer"> <div class="demo-content"> <div class="computer">
<div id="addDot_demo_comp"><img src="img/demo_img2.jpg" alt="" /></div>
</div> </div> </div>
As shown in above code, image is wrapped into <div> and CSS class
class="automotive" is applied to its wrapper. This is done to make
image center to the container & to define image's boundries to restrict hot spot
label to go beyound certain limit of width & height. If no width/height is defined
for the container, it will take full width and hot spot label will expand till container
width.
CSS
Default hot spot styles are defined into "addDot_styles.css" file. To make plug-in
workable, you have to add that file into your <head> part.
<link href="css/addDot_styles.css" rel="stylesheet" type="text/css" />
As mentioned above, to define maximum allowed boundries you can wrap your image
into <div> and can apply CSS class, in which you can specify
CSS properties for the container.
If you are adding multiple images on one page and if you want to apply different look & feel to each image hot spot, you can define CSS classes into CSS files as below.
- For styling outer containers define CSS classes into your website global CSS e.g. "global_style.css" file.
- For styling hot spot icons, labels, fonts etc. define CSS classes into "addDot_styles.css" file.
Step 3 - Define your hot spots
You can define hot spots for multiple images as below.
<script type="text/javascript"> $(window).load(function()
{ $('#addDot_demo_auto').addDot({ leftPos: 330, topPos: 180, label: 'Aerodynamic
design. Passenger capsule with integrate battries', showOnLoad: true, aniType: 'slide',
aniSpeed: 0.75, width:160 }); $('#addDot_demo_auto').addDot({ leftPos: 145, topPos:
180, label: 'Organic LED external light', showOnLoad: false, aniType: 'slide', aniSpeed:
0.75 }); // You can add more hot spots for Automotive section so on... $('#addDot_demo_comp').addDot({
leftPos: 315, topPos: 70, label: 'Inbuilt 2 MP HD Web Cam', showOnLoad: false, aniType:
'none', eventType: 'hover' }); $('#addDot_demo_comp').addDot({ leftPos: 130, topPos:
320, label: '2nd Generation Intel® Core™ i5-2430M processor', showOnLoad: false,
aniType: 'none', width:150, eventType: 'hover' }); // You can add more hot spots
for Computer section so on... }); </script> To get more idea, look at the source code of this page, all hot spots are defined into "custom.js" file.
Options
| Option | Description | ||
|---|---|---|---|
leftPos
|
Data Type: integer Default
Value: 0 Possible Value:
200Place hot spot on specified left position. |
||
topPos
|
Data Type: integer Default
Value: 0 Possible Value:
200Place hot spot on specified top position. |
||
label
|
Data Type: string Default
Value: 'Label Text' Possible
Value: 'Hot spot label text'Label text that will be display inside hot spot. |
||
thumbImg
|
Data Type: string Default
Value: NA Possible Value:
'img/thumb_img.gif'Add thumb image on left side of label. For displaying thumb image, you have to pass image URL. (e.g. img/path/imgname.ext) |
||
showOnLoad
|
Data Type: boolean Default
Value: false Possible Value:
true or falseSet open/close hot spot label on page load. If showOnLoad
is set to true hot spot will be open on page load.
|
||
showOnlyOne
|
Data Type: boolean Default
Value: false Possible Value:
true or falseSet only one hot spot label open on page at a time. If
showOnlyOne is set to true at a time only one hot spot
will be open previously opened hot spot will be close.
|
||
openDirectionH
|
Data Type: string Default
Value: 'ltr' Possible Value:
'rtl' or 'ltr'Set open/close horizontal direction of hot spot label. [rtl = right to left, ltr = left to right] |
||
openDirectionV
|
Data Type: string Default
Value: 'down' Possible Value:
'up' or 'down'Set open/close vertical direction of hot spot label. |
||
eventType
|
Data Type: string Default
Value: 'click' Possible Value:
'click' or 'hover'Set event type for hot spot open/close effect. |
||
aniType
|
Data Type: string Default
Value: 'none' Possible Value:
'slide' or 'none'There are two options, by setting slide hot spot will open/close with
slide effect. While NA will open/close hot spot without any effect.
You can set the animation speed via aniSpeed
option.
|
||
aniSpeed
|
Data Type: integer Default
Value: 1 Possible Value:
2 or 0.75The duration of the animation. (duration is in seconds) |
||
width
|
Data Type: integer Default
Value: NA Possible Value:
100Set width of hot spot. (value is in pixel) If width is not specified,
it will adjust width based on hot spot label text content.
|
||
height
|
Data Type: integer Default
Value: NA Possible Value:
100Set height of hot spot. (value is in pixel) If height is not specified,
it will adjust height based on hot spot label text content.
|
||
boundaryPadding
|
Data Type: integer Default
Value: 0 Possible Value:
10Set right & bottom padding if width or height is not specified. By setting contentPadding as 10
if width is not specified, it will set width of hot spot 10px less than maximum
allowed with (width of an image container). If height is not specified, it will
set height of hot spot 10px less than maximum allowed height (height of an image
container).
|
||
withinBoundary
|
Data Type: boolean Default
Value: false Possible Value:
true or falseIf true, it will not allow hot spot position out of image area boundary. If user do so it will adjust to max allowed boundary – 150px. |
||
btnLabel
|
Data Type: string Default
Value: NA Possible Value:
'1' or 'a' or 'I'Set button label instead of button icon. |
Override Default Values
You can easily change the default values for the hot spot. You can define your hot spot as below.
$('imageContainerID').addDot({ leftPos: 100, // For left position topPos: 100,
// For top position label: 'Your hot spot label', // String label thumbImg: 'img/thumb_img.png'
// Thumb image path showOnLoad: true, // This will make hot spot open/close on page
load showOnlyOne: false, // This will make only one hot spot open at a time openDirectionH:
'ltr', // Set horizontal open direction for hot spot label openDirectionV: 'down',
// Set vertical open direction for hot spot label eventType: 'hover', // Specify
event type click/hover aniType: 'slide', // Specifiy animation type for hot spot
open/close aniSpeed: 0.75, // Animation duration width:200, // For width of hot
spot label height: 50, // For height of hot spot label boundaryPadding: 20, // Set
hot spot width/height - 20px if height/width not specified withinBoundary: true,
// Set hot spot within image boundary btnLabel: '1' // Display button label instead
of icon });