Class imgmap
Defined in: imgmap.js.
Constructor Summary
new imgmap
(config)
Field Summary
version
Version string of imgmap
buildDate
Build date of imgmap
buildNumber
Sequential build number of imgmap
config
Config object of the imgmap instance
is_drawing
Status flag to indicate current drawing mode
strings
Array to hold language strings
memory
Helper array for some drawing operations
areas
Array to hold reference to all areas (canvases)
logStore
Array to hold last log entries
eventHandlers
Associative array to hold bound event handlers
viewmode
possible values: 0 - edit, 1 - preview
loadedScripts
array of dynamically loaded javascripts
mapname
holds the name of the actively edited map, use getMapName to read it
mapid
holds the id of the actively edited map, use getMapIdto read it
waterMark
watermark to attach to output
globalscale
global scale of areas (1-normal, 2-doubled, 0.5-half, etc.
DM_RECTANGLE_DRAW
is_drawing draw mode constant
DM_RECTANGLE_MOVE
is_drawing draw mode constant
DM_RECTANGLE_RESIZE_TOP
is_drawing draw mode constant
DM_RECTANGLE_RESIZE_RIGHT
is_drawing draw mode constant
DM_RECTANGLE_RESIZE_BOTTOM
is_drawing draw mode constant
DM_RECTANGLE_RESIZE_LEFT
is_drawing draw mode constant
DM_SQUARE_DRAW
is_drawing draw mode constant
DM_SQUARE_MOVE
is_drawing draw mode constant
DM_SQUARE_RESIZE_TOP
is_drawing draw mode constant
DM_SQUARE_RESIZE_RIGHT
is_drawing draw mode constant
DM_SQUARE_RESIZE_BOTTOM
is_drawing draw mode constant
DM_SQUARE_RESIZE_LEFT
is_drawing draw mode constant
DM_POLYGON_DRAW
is_drawing draw mode constant
DM_POLYGON_LASTDRAW
is_drawing draw mode constant
DM_POLYGON_MOVE
is_drawing draw mode constant
DM_BEZIER_DRAW
is_drawing draw mode constant
DM_BEZIER_LASTDRAW
is_drawing draw mode constant
DM_BEZIER_MOVE
is_drawing draw mode constant
event_types
Callback events that you can handle in your GUI.
Method Summary
addLoadEvent(obj, callback)
We need this because load events for scripts function slightly differently.
_setopacity(area, bgcolor, pct)
Set opacity of area to the given percentage, as well as set the background color.
_recalculate(id, coords)
Updates the visual representation of the area with the given id according to the new coordinates that typically come from an input on the GUI.
_polygonshrink(area)
Shrink the polygon bounding area to the necessary size, by first reducing it to the minimum, and then gradually growing it.
Field Detail
Method Detail
assignOID(objorid)
Return an object given by id or object itself.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
objorid | A DOM object, or id of a DOM object. |
Returns:
The identified DOM object or null on error. |
setup(config)
Main setup function.
Can be called manually or constructor will call it.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
config | config object |
Returns:
True if all went ok. |
onLoad(e)
EVENT HANDLER: Handle event when the page with scripts is loaded.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
e | The event object. |
addEvent(obj, evt, callback)
Attach new 'evt' event handler 'callback' to 'obj'
Parameters:
obj | The object on which the handler is defined. | |
evt | The name of the event, like mousedown. | |
callback | The callback function (named if you want it to be removed). |
removeEvent(obj, evt, callback)
Detach 'evt' event handled by 'callback' from 'obj' object.
Callback must be a non anonymous function, see eventHandlers.
Parameters:
obj | The object on which the handler is defined. | |
evt | The name of the event, like mousedown. | |
callback | The named callback function. |
See:
#eventHandlers Example: myimgmap.removeEvent(myimgmap.pic, 'mousedown', myimgmap.eventHandlers.img_mousedown); |
addLoadEvent(obj, callback)
We need this because load events for scripts function slightly differently.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
obj | ||
callback |
See:
http://dean.edwards.name/weblog/2006/06/again/ |
loadScript(url)
Include another js script into the current document.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
url | The url of the script we want to load. |
See:
#script_load |
#addLoadEvent |
script_load(e)
EVENT HANDLER: Event handler of external script loaded.
Parameters:
e | The event object. |
loadStrings(obj)
Load strings from a key:value object to the prototype strings array.
Author: adam.
Author: adam.
Parameters:
obj | Javascript object that holds key:value pairs. |
loadImage(img, imgw, imgh)
This function is to load a given img url to the pic_container.
Loading an image will clear all current maps.
Parameters:
img | The imageurl or object to load (if object, function will get url, and do a recall) | |
imgw | The width we want to force on the image (optional) | |
imgh | The height we want to force on the image (optional) |
Returns:
True on success |
See:
#useImage |
useImage(img)
We use this when there is an existing image object we want to handle with imgmap.
Mainly used in highlighter mode.
Author: adam.
Author: adam.
Parameters:
img | DOM object or id of image we want to use. |
See:
#loadImage |
#imgmap_spawnObjects |
statusMessage(str)
Fires custom hook onStatusMessage, passing the status string.
Use this to update your GUI.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
str | The status string |
log(obj, level)
Adds basic logging functionality using firebug console object if available.
Also tries to use AIR introspector if available.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
obj | The object or string you want to debug/echo. | |
level |
getMapHTML(flags)
Produces the image map HTML output with the defined areas.
Invokes getMapInnerHTML.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
flags | Currently ony 'noscale' used to prevent scaling of coordinates in preview mode. |
Returns:
The generated html code. |
getMapInnerHTML(flags)
Get the map areas part only of the current imagemap.
Author: adam.
Author: adam.
Parameters:
flags | Currently ony 'noscale' used to prevent scaling of coordinates in preview mode. |
Returns:
The generated map code without the map wrapper. |
See:
#getMapHTML |
getMapName()
Get the map name of the current imagemap.
If doesnt exist, nor map id, generate a new name based on timestamp.
The most portable solution is to use the same value for id and name.
This also conforms the HTML 5 specification, that says:
"If the id attribute is also specified, both attributes must have the same value."
Author: adam.
Author: adam.
Returns:
The name of the map. |
See:
http://www.w3.org/html/wg/html5/#the-map-element |
#getMapId |
getMapId()
Get the map id of the current imagemap.
If doesnt exist, use map name.
Author: adam.
Author: adam.
Returns:
The id of the map. |
See:
#getMapName |
_normShape(shape)
Convert wild shape names to normal ones.
Parameters:
shape | The name of the shape to convert. |
Returns:
The normalized shape name, rect as default. |
_normCoords(coords, shape, flag)
Try to normalize coordinates that came from:
1. html textarea
2. user input in the active area's input field
3. from the html source in case of plugins or highlighter
Example of inputs that need to be handled:
035,035 075,062
150,217, 190,257, 150,297,110,257
Author: adam.
Author: adam.
Parameters:
coords | The coordinates in a string. | |
shape | The shape of the object (rect, circle, poly, bezier1). | |
flag | Flags that modify the operation. (fromcircle, frompoly, fromrect, preserve) |
Returns:
The normalized coordinates. |
setMapHTML(map)
Sets the coordinates according to the given HTML map code or DOM object.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
map | DOM object or string of a map you want to apply. |
Returns:
True on success |
togglePreview()
Preview image with imagemap applied.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Returns:
False on error, 0 when switched to edit mode, 1 when switched to preview mode |
addNewArea()
Adds a new area. It will later become a canvas.
GUI should use the onAddArea callback to act accordingly.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
See:
#initArea |
initArea(id, shape)
Initialize a new area.
Create the canvas, initialize it.
Reset area parameters.
Parameters:
id | The id of the area (already existing with undefined shape) | |
shape | The shape the area will have (rect, circle, poly, bezier1) |
relaxArea(id)
Resets area border and opacity to a normal state after drawing.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
id | The id of the area. |
See:
#relaxAllAreas |
relaxAllAreas()
Resets area border and opacity of all areas.
Calls relaxArea on each of them.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
See:
#relaxArea |
_setBorder(id, style)
Set border of a given area according to style flag.
Possible values of style: NORM, HIGHLIGHT, DRAW.
Non-rectangle shapes wont get a border if config.bounding_box is false.
Parameters:
id | The id of the area to set the border on. | |
style | Coloring style (NORM, HIGHLIGHT, DRAW), see relevant colors in config. |
Since:
2.1 |
_setopacity(area, bgcolor, pct)
Set opacity of area to the given percentage, as well as set the background color.
If percentage contains a dash(-), the setting of the opacity will be gradual.
Parameters:
area | The area object. | |
bgcolor | New background color | |
pct | Percentage of the opacity. |
_getopacity(area)
Get the currently set opacity of a given area.
Author: adam.
Author: adam.
Parameters:
area | The area (canvas) you want to get opacity info from. |
Returns:
Opacity value in a range of 0-100. |
removeArea(id, mass)
Removes the area marked by id.
removeAllAreas will indicate a mass flag so that the output HTML will only be updated at
the end of the operation.
Callback will call the GUI code to remove GUI elements.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
id | The id of the area to remove. | |
mass | Flag to indicate skipping the call of onHtmlChanged callback |
See:
#removeAllAreas |
removeAllAreas()
Removes all areas.
Will call removeArea on all areas.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
See:
#removeArea |
scaleAllAreas(scale)
Scales all areas.
Will store scale parameter in globalscale property.
This is needed to know how to draw new areas on an already scaled canvas.
Author: adam.
Author: adam.
Parameters:
scale | Scale factor (1-original, 0.5-half, 2-double, etc.) |
scaleArea(rscale, rscale)
Scales one area.
Author: adam.
Author: adam.
Parameters:
rscale | Relative scale factor (1-keep, 0.5-half, 2-double, etc.) | |
rscale |
_putlabel(id)
Put label in the top left corner according to label config.
By default it will contain the number of the area (area.aid)
Parameters:
id | The id of the area to add label to. |
_puthint(id)
Set area title and alt (for IE) according to the hint configuration.
This will show up in the usual yellow box when you hover over with the mouse.
Parameters:
id | The id of the area to set hint at. |
_repaintAll()
Will call repaint on all areas.
Useful when you change labeling or hint config on the GUI.
See:
#_repaint |
_repaint(area, color, x, y)
Repaints the actual canvas content.
This is the only canvas drawing magic that is happening.
In fact rectangles will not have any canvas content, just a normal css border.
After repainting the canvas, it will call putlabel and puthint methods.
Parameters:
area | The area object. | |
color | Color of the line to draw on the canvas. | |
x | Only used for polygons/beziers as the newest control point x. | |
y | Only used for polygons/beziers as the newest control point y. |
_updatecoords(id)
Updates Area coordinates.
Called when needed, eg. on mousemove, mousedown.
Also updates html container value (thru hook).
Calls callback onAreaChanged and onHtmlChanged so that GUI can follow.
This is an important hook to your GUI.
Uses globalscale to scale real coordinates to area coordinates.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
id | The id of the area. |
_recalculate(id, coords)
Updates the visual representation of the area with the given id according
to the new coordinates that typically come from an input on the GUI.
Uses globalscale to scale area coordinates to real coordinates.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Parameters:
id | The id of the area. | |
coords | The new coords, they will be normalized. |
_polygongrow(area, newx, newy)
Grow polygon area to be able to contain the given new coordinates.
Author: adam.
Author: adam.
Parameters:
area | The area to grow. | |
newx | The new coordinate x. | |
newy | The new coordinate y. |
See:
#_polygonshrink |
_polygonshrink(area)
Shrink the polygon bounding area to the necessary size, by first reducing it
to the minimum, and then gradually growing it.
We need this because while we were drawing the polygon, it might have expanded
the canvas more than needed.
Will repaint the area.
Author: adam.
Author: adam.
Parameters:
area | The area to shrink. |
See:
#_polygongrow |
img_mousemove(e)
EVENT HANDLER: Handles mousemove on the image.
This is the main drawing routine.
Depending on the current shape, will draw the rect/circle/poly to the new position.
Parameters:
e | The event object. |
img_mouseup(e)
EVENT HANDLER: Handles mouseup on the image.
Handles dragging and resizing.
Parameters:
e | The event object. |
img_mousedown(e)
EVENT HANDLER: Handles mousedown on the image.
Handles beggining or end of draw, or polygon/bezier point set.
Parameters:
e | The event object. |
highlightArea(id, flag)
Highlights a given area.
Sets opacity and repaints.
Parameters:
id | The id of the area to blur. | |
flag | Modifier, possible values: grad - for gradual fade in |
blurArea(id, flag)
Blurs a given area.
Sets opacity and repaints.
Parameters:
id | The id of the area to blur. | |
flag | Modifier, possible values: grad - for gradual fade out |
area_mousemove(e)
EVENT HANDLER: Handles event of mousemove on imgmap areas.
- changes cursor depending where we are inside the area (buggy in opera)
- handles area resize
- handles area move
Author: adam.
Author: adam.
Parameters:
e | The event object. |
area_mouseup(e)
EVENT HANDLER: Handles event of mouseup on imgmap areas.
Basically clears draggedId.
Author: adam.
Author: adam.
Parameters:
e | The event object |
area_mouseover(e)
EVENT HANDLER: Handles event of mouseover on imgmap areas.
Calls gradual highlight on the given area.
Author: adam.
Author: adam.
Parameters:
e | The event object |
area_mouseout(e)
EVENT HANDLER: Handles event of mouseout on imgmap areas.
Calls gradient blur on the given area.
Author: adam.
Author: adam.
Parameters:
e | The event object |
area_dblclick(e)
EVENT HANDLER: Handles event of double click on imgmap areas.
Basically only fires the custom callback.
Author: Colin Bell.
Author: Colin Bell.
Parameters:
e | The event object |
area_mousedown(e)
EVENT HANDLER: Handles event of mousedown on imgmap areas.
Sets the variables draggedid, selectedid and currentid to the given area.
Author: adam.
Author: adam.
Parameters:
e | The event object |
doc_keydown(e)
EVENT HANDLER: Handles event 'keydown' on document.
Handles SHIFT hold while drawing.
Note: Safari doesn't generate keyboard events for modifiers:
Author: adam.
Author: adam.
Parameters:
e | The event object |
doc_keyup(e)
EVENT HANDLER: Handles event 'keyup' on document.
Handles SHIFT release while drawing.
Author: adam.
Author: adam.
Parameters:
e | The event object |
doc_mousedown(e)
EVENT HANDLER: Handles event 'mousedown' on document.
Author: adam.
Author: adam.
Parameters:
e | The event object |
_getPos(element)
Get the real position of the element.
Deal with browser differences when trying to get the position of an area.
Parameters:
element | The element you want the position of. |
Returns:
An object with x and y members. |
_getLastArea()
Gets the last (visible and editable) area.
Author: Adam Maschek (adam.maschek(at)gmail.com).
Author: Adam Maschek (adam.maschek(at)gmail.com).
Returns:
The last area object or null. |
assignCSS(obj, cssText)
Parses cssText to single style declarations.
Author: adam.
Author: adam.
Parameters:
obj | The DOM object to apply styles on. | |
cssText | The css declarations to apply. |
fireEvent(evt, obj)
To fire callback hooks on custom events, passing them the object of the event.
Author: adam.
Author: adam.
Parameters:
evt | The type of event | |
obj | The object of the event. (can be an id, a string, an object, whatever is most relevant) |
setAreaSize(id, w, h)
To set area dimensions.
This is needed to achieve the same result in all browsers.
Author: adam.
Author: adam.
Parameters:
id | The id of the area (canvas) to resize. | |
w | The desired width in pixels. | |
h | The desired height in pixels. |
detectLanguage()
Tries to detect preferred language of user.
Returns:
The two byte language code. (We dont care now for pt-br, etc.) |