JsHighlighter can be used to place a highlight layer above the current web page and draw circles around specified DOM elements.
This builds a PNG image on demand. For large images, building the image can be slow.
The color of the background and of the circles can be specified in the constructor.
Please see Working Sample for a working sample.
- Include the
scripts/highlighter.js
andscripts/external/pnglib.js
scripts in yourhtml/head
element.
<script type="text/javascript" language="javascript" src="../scripts/external/pnglib.js"></script>
<script type="text/javascript" language="javascript" src="../scripts/highlighter.js"></script>
- Create an instance of a
Highlighter
object.
var highlighter = new Highlighter({
'backgroundRed': 255,
'backgroundGreen': 0,
'backgroundBlue': 0,
'backgroundAlpha': 155,
'fillRed': 0,
'fillGreen': 0,
'fillBlue': 255,
'fillAlpha': 75,
'radiusMultiplier': 1.65,
'loggingLevel': 'debug'
});
- Call the
init(...)
function on thehighlighter
instance.
var highlightObjects = new Array();
var icon1 = document.getElementById('icon1');
var icon2 = document.getElementById('icon2');
var icon3 = document.getElementById('icon3');
highlightObjects.push(icon1);
highlightObjects.push(icon2);
highlightObjects.push(icon3);
highlighter.init(highlightObjects);
- Call the
showHighlight()
function on thehighlighter
instance.
highlighter.showHighlight();
This function will create a new instance of a Highlighter.
This JavaScript object can contain several attributes which can be used to customize the look/feel of the highlighting done by this Highlighter.
Attribute Name | Description |
---|---|
backgroundRed | The color-code (0 - 255) for the red part of the background-color. |
backgroundGreen | The color-code (0 - 255) for the green part of the background-color. |
backgroundBlue | The color-code (0 - 255) for the blue part of the background-color. |
backgroundAlpha | The color-code (0 - 255) for the alpha part of the background-color. |
fillRed | The color-code (0 - 255) for the red part of the portal fill-color. |
fillGreen | The color-code (0 - 255) for the green part of the portal fill-color. |
fillBlue | The color-code (0 - 255) for the blue part of the portal fill-color. |
fillAlpha | The color-code (0 - 255) for the alpha part of the portal fill-color. |
radiusMultiplier | The multiplier to be used to determine the amount to multiply the radius by, to give extra padding around each portal. Ex: 1.5 would make the radius 50% larger than required to eclipse the DOM elements. |
This function will build an image URL that is the size of the current window and place transparent holes within the image at the locations of the specified objects to be highlighted.
The array of DOM elements that are to be highlighted.
This function will clear the currently loaded objects and remove the highlight panel.
This function will show the highlight panel and add a window-resize handler which will ensure that the highlight panel is kept up-to-date.