https://github.com/mottie/imagehighlighter

A jQuery plugin that highlight blocks of an image when hovering over a link.
https://github.com/mottie/imagehighlighter

Last synced: about 2 months ago
JSON representation

A jQuery plugin that highlight blocks of an image when hovering over a link.

• Host: GitHub
• URL: https://github.com/mottie/imagehighlighter
• Owner: Mottie
• Created: 2010-07-02T15:34:07.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-10-12T19:15:50.000Z (about 14 years ago)
• Last Synced: 2024-10-11T09:56:00.392Z (2 months ago)
• Language: JavaScript
• Homepage: http://wowmotty.blogspot.com/2010/06/imagehighlighter-v10.html
• Size: 180 KB
• Stars: 6
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.markdown

Awesome Lists containing this project

README

        
**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][1] entry and view [the demo][2] source.

  [1]: http://wowmotty.blogspot.com/2010/06/imagehighlighter-v10.html

  [2]: http://mottie.github.com/imageHighlighter/index.html