Image Hotspot Widget Examples

Compare four ways to use interactive markers, detail cards, icons, and CTA buttons on campus maps, product photos, technical diagrams, and educational visuals.

Interactive Campus Map Hotspot Example

Use numbered markers and hover cards to turn an illustrated campus map into a guided tour. This full-width example suits orientation pages where visitors need quick context for each building.

Terbaik untuk

UniversitiesCampus toursIllustrated maps

Shoppable Product Photo Hotspot Example

Tag products inside a lifestyle photo with cart icons. Visitors can click each marker, read a short product description, and use the CTA button to continue to the product page.

Terbaik untuk

E-niagaLookbooksShoppable images

Educational Diagram Hotspot Example

Keep an exploded technical diagram uncluttered with pulsing info icons. Dark, text-only cards keep component explanations close to the visual without covering the details.

Terbaik untuk

PendidikanScienceTechnical docs

Interactive Lab Equipment Hotspot Example

Label equipment across a classroom photo with clear icons and click-based cards. This example works well for lab orientations, safety guides, and equipment training.

Terbaik untuk

PendidikanLab orientationsSafety guides

Ubah prospek menjadi pelanggan yang membayar dengan Jotform Form Builder

Ubah keterlibatan menjadi tindakan dengan Jotform. Buat formulir canggih yang menangkap prospek, mengumpulkan pembayaran, dan mengotomatiskan respons, semuanya dalam satu tempat. Setiap tanggapan masuk ke Kotak Masuk Jotform Anda, siap untuk ditindaklanjuti atau dihubungkan ke aplikasi favorit Anda.

Ayo Mulai — Gratis!