Highlighting Sections of Image
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:
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:
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.
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.
