Highlighting Sections of Image

04 Jul 2010
Posted by cgp
My brother is getting married soon and they are putting together a page to collect money for a set of gifts rather than the traditional set of wedding gifts because they are pretty set in that area. The idea works out pretty well - here is what it looks like:
What's been clicked:


Props to Ben Nadel's "Creating A Sliding Image Puzzle Plug-In" article. I ripped out the div-creation-styles routine right from there (but gutted the puzzle portion of it)

I've been following Ben a couple years now, and pretty much everything I've seen him put together is top notch, so it's worth a visit.

The fun stuff happens here:
...
function pieceClickHandler() {
   console.log($(this).data('index'));
   $(this).toggleClass('unbought');
  }
  
function init() {
  jImg = $('#myImg');    
  jContainer = jImg.parent();
  arr2DBoard = []; 
  initPuzzle(100);
}
...

The "action" can take place in the "pieceClickHandler". init() takes care of the setup. I probably could have coalesced it into a single function call, but *shrug* - not sure if it's necessary or not.

An editable demo contained here.