A jQuery plugin that highlight blocks of an image when hovering over a link.
Usage (default settings shown)
$("#imgHL").imageHighlighter({
borderColor : "#fff", // highlight border color
borderSize : 4, // highlight border thickness
borderType : "solid", // highlight border type
list : "a", // links that contain the highlight coordinates
descrip : "p", // HTML tag sibling of the link, that contains the description text (hidden)
descripClass: ".description", // HTML tag where description text is shown (placeholder)
overlay : true, // display an overlay to make the highlight stand out
current : "current", // class applied to link currently used to highlight the image
hoverTimeout: 100, // hoverIntent timeout (only applied if hoverIntent plugin is loaded)
zindex : 10 // z-index of highlight box, overlay is automatically made 1 less than this number
})
// version 1.01 - moved the editor into an extension
$("#imgHL").imageHighlighterEditor({
useJcrop : true // Use Jcrop plugin if it is available
})
List HTML Tag required attribute
rel="sx1,sy1,ex2,ey2"
sx1 = Starting X position of the highlight box
sy1 = Starting Y position of the highlight box
ex2 = Ending X position of the highlight box
ey2 = Ending Y position of the highlight box
For more details, see my blog entry and view the demo source.