內容簡介
PinSpot 是一款互動式圖片熱點外掛，能將平面圖片轉換為可探索的互動地圖。使用者可以在圖片上放置熱點標記，並為每個標記提供詳細的工具提示，增強網站的互動性和使用體驗。
【主要功能】
• 無限熱點：可在任意圖片上放置熱點，並保持響應式設計
• 豐富工具提示：包含標題、描述、圖片或影片及行動呼籲按鈕
• 可點擊區域：支援多邊形、矩形或圓形區域
• 標記樣式：多種樣式選擇，包括數字、點、問號及自訂圖片
• 自訂工具提示顏色：可設定背景及文字顏色
• 導覽導覽：提供上一頁/下一頁控制及自動播放選項
外掛標籤
開發者團隊
② 後台搜尋「PinSpot – Interactive Image Hotspots」→ 直接安裝（推薦）
原文外掛簡介
📌 PinSpot turns a flat image into an interactive image map people can explore. Drop hotspot pins anywhere on a photo, floor plan, diagram, map, or product shot — each pin opens a polished, accessible tooltip with a title, description, image or video, and a call-to-action button.
It is a single native block built the modern WordPress way — on the Interactivity API, the same technology that powers WordPress core blocks. No jQuery, no shortcodes, no page builder required. The frontend script is under 4 KB and only loads on pages that actually use a hotspot, so it never slows the rest of your site down.
✨ Highlights
📌 Unlimited hotspots on any image, with percentage-based positions that stay responsive at every screen size
💬 Rich tooltips — title, description, an image, a self-hosted video, or a YouTube / Vimeo embed, plus a call-to-action button
📐 Draw clickable areas — polygon, rectangle, or circle regions, not just point pins — ideal for floor plans, maps, and infographics
🎨 Marker styles — numbered, dot, plus, info, question, any emoji, or your own custom image, in any size and color
🖌️ Custom tooltip colors — set a background and text color, on top of the light/dark presets
🧭 Guided tour — Previous / Next controls with optional autoplay to walk visitors through every pin in order
🏷️ Group filters — let visitors show or hide pins by category, perfect for maps and floor plans
🔍 Zoom & pan plus an image lightbox for large, detailed graphics
✏️ Edit on the image — write a pin’s title and description right where it sits, then copy-and-paste a pin’s style onto others
♿ Accessible — full keyboard support, screen-reader labels, reduced-motion, RTL, and an optional text list
🔒 Privacy-first — no external requests until a visitor plays a video; your data stays in your post content
🧩 Three starter patterns and one-click import / export
🎯 What you can build
🏡 Real-estate floor plans & property tours — annotate rooms, floors, and features on a plan or photo so buyers can explore.
🛍️ Shoppable & WooCommerce product images — call out features with numbered pins and “Buy now” buttons.
🗺️ Interactive maps, campus & venue guides — a zoomable, pannable image map with pins visitors can explore.
🎪 Trade-show & event floor maps — show booths, stages, and exhibitors on an interactive map.
📊 Infographics & diagrams — explain each part in place, without cluttering the graphic.
👥 Team & about pages — reveal names and roles on hover.
💬 Rich, flexible tooltips
Every pin can carry a title, a description (with line breaks and basic bold, italic, and links), and one piece of media: an image from your library, a self-hosted video, or a YouTube / Vimeo embed. Add an optional call-to-action button that links anywhere. Choose light or dark tooltips, decide where they open (top, bottom, left, right, or automatic), and pick a marker style — numbered, dot, plus, info, question, any emoji, or your own custom image — in any size and color, with an optional pulse or bounce animation.
🧭 Guided tour
Turn on tour mode to add Previous and Next controls that walk visitors through every hotspot in order — perfect for a step-by-step story, a product walkthrough, or a self-running kiosk display. Optionally let the tour advance on its own at an interval you choose; visitors always get a pause button, and autoplay stays off automatically for anyone who prefers reduced motion. Each stop is announced to screen readers as it opens. Style the bar to match your design: place it below the image or overlaid on it, show or hide the position counter, and set the button color, size, and shape.
🏷️ Group filters
Assign each hotspot to a named group — “Exits”, “Restrooms”, “Food”, whatever fits — and PinSpot adds a row of filter chips above the image. Visitors tap a chip to show or hide that group, so a busy map or floor plan stays readable and people can focus on just what they need. An “All” chip brings everything back. The chips are real toggle buttons with proper pressed states for keyboard and screen-reader users, each item in the optional list is tagged with its group, and you can set the chip color to match your brand.
♿ Accessibility built in
PinSpot is designed to work for everyone, not just mouse users. Accessibility is built into how it works:
⌨️ Fully keyboard operable — every marker is a real button. Tab moves between pins, Enter or Space opens a tooltip, and Escape closes it and returns focus to the exact marker you opened it from, so you never lose your place.
🔊 Screen-reader ready — each marker exposes proper aria-expanded and aria-controls state plus a descriptive label, so assistive technology understands what every pin does and whether its tooltip is currently open.
📝 A full text alternative for the image — turn on the optional hotspot list and every pin’s title, description, and link is also printed as a clean, ordered list beneath the image. Screen-reader users get all the information without having to interact with the graphic at all — and search engines can read it too, which is good for SEO.
🌀 Respects reduced motion — if a visitor has “reduce motion” enabled in their operating system, every marker animation and tooltip transition is automatically switched off.
🎚️ Accessible controls throughout — the zoom buttons, the lightbox close button, and the video play button all carry proper labels.
🌍 Right-to-left ready — full RTL language support is included.
🧩 Start fast with block patterns
New to hotspots? PinSpot ships three ready-made layouts you can insert and edit in seconds. In the editor, open the block inserter (the + button in the top-left), switch to the Patterns tab, and choose the PinSpot category. You will find:
🛍️ Product showcase — three numbered pins with call-to-action buttons, arranged over a product image. Great for shoppable images and feature callouts.
👥 Team introduction — hover-activated dot pins with dark tooltips, spaced for a group photo. Perfect for an about or team page.
🗺️ Zoomable map tour — a zoom-and-pan image with pulsing question-mark pins, built for maps, floor plans, campus guides, and infographics.
Each pattern drops in with a demo illustration and sample pins already in place. Just replace the demo image with your own and edit the text — it is the fastest way to see everything PinSpot can do and to learn how the pieces fit together.
🎛️ Everything lives on the block — there is no settings page to hunt for
PinSpot deliberately has no separate admin dashboard. You configure everything right where you see it, using the standard WordPress block controls:
🧰 Block toolbar — swap the image, or click Add hotspot and then click the image to drop a pin exactly where you want it.
📍 Placing & moving pins — drag any marker to reposition it, or select it and nudge with the arrow keys (hold Shift for larger steps) for precise placement.
✏️ Edit right on the image — select a pin and its tooltip opens on the image so you can type the title and description in place, with bold, italic, and links in the description. The sidebar keeps the same fields if you prefer.
🎛️ Per-hotspot panels — with a pin selected, the block sidebar (Settings tab) shows panels for its Content, Media, Call to action, Marker style, and Behavior.
📋 All hotspots — one panel lists every pin on the image so you can reorder, duplicate, or delete them at a glance.
🎨 Copy & paste pin style — copy one pin’s look and behavior (marker, size, color, animation, trigger, placement, theme) and paste it onto another pin, or apply it to every pin at once, without touching their text.
⚙️ Display settings — set the trigger (click or hover), light or dark theme, tooltip width, the optional accessible list, group filters, the guided tour (with optional autoplay), and whether zoom & pan is enabled.
💾 Import / Export — save the whole layout as a JSON file and load it into another post, page, or site.
If you have ever placed a WordPress block, you already know how to use PinSpot.
🔒 Privacy-first by design
PinSpot makes no external requests on its own. YouTube and Vimeo tooltips show a lightweight preview image and only load the real player after the visitor clicks play — nothing is sent to Google or Vimeo until then. Your hotspot data is stored inside the block in your post content: no custom database tables, no tracking, no phoning home, and a completely clean uninstall.
External Services
PinSpot embeds no external service by default. Only when you choose YouTube or Vimeo as a tooltip’s media type, the following apply on the public page:
YouTube (Google LLC) — video embeds and thumbnails
Purpose: show the video preview thumbnail and, after the visitor clicks play, the embedded player.
Data sent: the visitor’s IP address and standard browser headers are sent to i.ytimg.com when the tooltip preview image loads, and to www.youtube-nocookie.com (the privacy-enhanced embed domain) only after the visitor clicks play.
Sent when: only on pages where you added a YouTube tooltip; the player itself loads only on click.
Service: https://www.youtube.com
Terms of Service: https://www.youtube.com/t/terms
Privacy Policy: https://policies.google.com/privacy
Vimeo (Vimeo.com, Inc.) — video embeds
Purpose: show the embedded Vimeo player after the visitor clicks play.
Data sent: the visitor’s IP address and standard browser headers are sent to player.vimeo.com only after the visitor clicks play.
Sent when: only on pages where you added a Vimeo tooltip, and only on click.
Service: https://vimeo.com
Terms of Service: https://vimeo.com/terms
Privacy Policy: https://vimeo.com/privacy
