Interactive Image Viewer with HTML Maps – Panelize

Panelize is a vanilla JS library that allows you to navigate between large images by panning and zooming to specific areas defined by standard <map> coordinates.

Features:

• Reads coordinates directly from standard HTML maps.
• Animates movement using hardware-accelerated CSS.
• Connects directly to standard HTML buttons for movement control.
• Skips areas with target attributes automatically, treating them as regular links.

See It In Action:

Use Cases:

• Web comic readers who need panel-by-panel navigation.
• Product walkthroughs that zoom into specific screenshot regions.
• Longform infographics that guide users through key sections.
• Presentation slides exported as a single image.

How To Use It:

1. Load the Load Panelize as an ES module:

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

2. Wrap your image and the corresponding map in a container element. You must apply the data-panelize attribute to this container. The container requires explicit width and height dimensions. The <map> element must reside inside this container.

<!-- Set a fixed viewer size for stable scaling -->
<div id="viewer" data-panelize style="width: 800px; height: 520px;">
  <!-- Use a real image and connect it to the map -->
  <img src="storyboard.jpg" usemap="#story-panels" alt="Storyboard panels" />
  <map name="story-panels">
    <!-- Each area defines one panel in image coordinates -->
    <area coords="0,0,400,260" />
    <area coords="400,0,800,260" />
    <area coords="0,260,800,520" />
  </map>
</div>
<!-- Navigation Controls -->
<button id="btnPrevPanel">Previous</button>
<button id="btnNextPanel">Next</button>

3. You can initialize the library programmatically via JavaScript. This provides advanced control over the configuration.

• fullImageStart (boolean): Shows the full scaled image first.
• nextBtn (string): Sets the CSS selector for the forward button.
• prevBtn (string): Sets the CSS selector for the backward button.

// Initialize the library on the specific container
const presentationViewer = new Panelize(document.querySelector('#presentation-canvas'), {
  fullImageStart: true,
  nextBtn: '#btn-forward',
  prevBtn: '#btn-backward'
});

4. You can also pass the options via HTML data attributes:

<div
  id="viewerConfigured"
  data-panelize
  data-full-image-start="false"
  data-next-btn="#btnNextPanel"
  data-prev-btn="#btnPrevPanel"
  style="width: 900px; height: 560px;"
>
  <!-- Image and map go here -->
</div>

5. API methods.

// Show the full scaled image view
instance.showFullImage();

// Move to the next or previous panel
instance.transformPanel('next');
instance.transformPanel('prev');

The post Interactive Image Viewer with HTML Maps – Panelize appeared first on CSS Script.