open-index/open-npm huggingface dataset:
npm package: @russellbits/panelize
Description: Vanilla JS ES module for navigating web comics, presentations, or any large image using HTML image maps with pan and zoom animations
Author: Russell Warner
Latest version: 1.0.0

# Panelize
#### Navigation for images based on HTML image maps

Panelize is a vanilla JS ES module for navigating web comics, presentations, or any large image using HTML image maps. It pans and zooms to each mapped area using CSS `transform` animation — no jQuery, no dependencies.

## Usage

Include the script as an ES module:

    <script type="module" src="panelize.js"></script>

Wrap your image in a container div with `data-panelize`. The `<map>` must be **inside** the container:

    <div data-panelize style="width: 800px; height: 600px;">
      <img src="yourImage.jpg" usemap="#panels" />
      <map name="panels">
        <area coords="0,0,400,300" />
        <area coords="400,0,800,300" />
        <area coords="0,300,800,600" />
      </map>
    </div>

    <button id="nextPanelBtn">Next</button>
    <button id="prevPanelBtn">Previous</button>

That's it — no JavaScript required for basic use.

## Settings

Configure with `data-*` attributes on the container:

| Attribute | Default | Description |
|---|---|---|
| `data-full-image-start` | `"true"` | Show full scaled image first; `"false"` to start at first panel |
| `data-next-btn` | `"#nextPanelBtn"` | CSS selector for the Next button |
| `data-prev-btn` | `"#prevPanelBtn"` | CSS selector for the Prev button |

## Programmatic API

    import { Panelize } from './panelize.js';

    const p = new Panelize(document.querySelector('#myViewer'), {
      fullImageStart: true,
      nextBtn: '#myNextBtn',
      prevBtn: '#myPrevBtn'
    });

## Panel Overlay (debug tool)

`paneloverlay.js` draws colored boxes over all image map areas for visual debugging. No JavaScript required — any element with `data-panel-overlay` is initialized automatically on `DOMContentLoaded`.

    <script type="module" src="paneloverlay.js"></script>

    <div data-panel-overlay style="position: relative; display: inline-block;">
      <img src="yourImage.jpg" usemap="#panels" />
      <map name="panels">
        <area coords="0,0,400,300" />
      </map>
    </div>

Add CSS for the overlay boxes (the module does not inject these — you must provide them):

    .panel {
      position: absolute;
      border: 2px solid rgba(255, 0, 0, 0.5);
      background: rgba(255, 0, 0, 0.1);
      box-sizing: border-box;
    }
    .panelHighlight {
      background: rgba(255, 0, 0, 0.35);
    }

## Notes

- The `<map>` element must be **inside** the `data-panelize` or `data-panel-overlay` container.
- The container should have an explicit `width` and `height` set.
- `paneloverlay.js` requires the container to have `position: relative`.
- Areas with a `target` attribute are skipped by Panelize (they are treated as links, not panels).

## License

&copy; R. E. Warner. Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php).