前言介紹
- 這款 WordPress 外掛「Interactive Image Map Plugin – Draw Attention」是 2015-02-11 上架。
- 目前有 20000 個安裝啟用數。
- 上一次更新是 2025-04-15，距離現在已有 18 天。
- 外掛最低要求 WordPress 3.5.1 以上版本才可以安裝。
- 有 111 人給過評分。
- 論壇上目前有 3 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！
外掛協作開發者
croixhaug | nataliemac | tylerdigital | wpdrawattention |
外掛標籤
hotspot | Image Map | floor plan | image maps | interactive images |
內容簡介
Draw Attention 是一款讓您可以輕鬆在網站上創建交互式影像地圖的 WordPress 外掛。您可以使用熱點（Hotspots）在圖像上突顯特定區域，讓使用者可以點擊、觸控或懸停以瀏覽有關每個區域的更多資訊。當使用者點擊或懸停時，您可以顯示更多內容或直接將使用者導向其他網址。
影像地圖也可以包含其他多媒體資訊，如圖像、文字、Shortcodes、圖庫、影片、音頻等，您可以讓使用者透過點擊或懸停來展開內容，甚至可以在原始圖像上直接自訂熱點的形狀。
該外掛非常適合用於手繪地圖、房地產的互動平面圖、點擊式資訊圖、圖像課程教程、WooCommerce 產品功能突顯等用途。
影像地圖功能：
可繪製無限熱點：在影像地圖上突顯想要標示的多個區域
滑鼠懸停時突顯：當使用者將滑鼠移到影像上方時，可以突顯不同的影像熱點區域
可自訂顏色：可選擇您所需要的自訂色彩方案，以配合您網站的風格
點擊後可以顯示更多資訊：當使用者點擊熱點時，可以展示更多資訊，非常適用於突顯您的影像地圖中的重點所在
綁定網址：在使用者點擊影像地圖的可點擊區域時，可選擇將使用者直接導向到其他網頁上
響應式設計
交互式影像地圖能夠根據您的網站模板和不同裝置的屏幕大小自動調整大小。此外，該外掛可以適配各種裝置，即使在觸控屏上也能良好運行。
可存取性高
本插件的影像地圖涵蓋的範圍非常廣泛，無論使用者裝置和功能如何，都能輕鬆訪問您的網站內容，即使使用屏幕閱讀器，所有可點擊區域都可以透過鍵盤命令進行訪問，讓任何使用者都能輕鬆使用您的交互式影像地圖。
基於 SEO 的可點擊注釋
該外掛以漸進式增強為原則構建，使您的內容可以適配不支持 JavaScript 的瀏覽器，也可以貼合 SEO 的需求，此外，直接在現有WordPress儀表板上就能輕鬆地畫出您的點擊區域，甚至可以使用 WordPress 的編輯器簡碼或Beaver Builder模板將您的交互式影像地圖嵌入任何頁面和文章當中。
全新的優化繪圖工具
現在可以製作複雜的圖形以及完美的圓形和矩形。使用新的快捷縮放和平移功能，可精確繪製可點擊熱區的形狀，隨時進行形狀的編輯。
升級到 Draw Attention Pro 版本，現在可以享有更多的功能和自訂選項：
創建多個交互式影像地圖 (僅限Pro版本)
需要在您的網站上添加多個交互式影像地圖嗎？Pro 版本允許在無限製作區域上排列無限的可點擊熱點。
注釋佈景選項 (僅限Pro版本)
展示更多有關高亮影像地圖區域的詳細資訊，包含資訊窗口和浮動提示視窗等不同方式進行展示.
20 種預定義色板(僅限Pro版本)
可從 20 種預定義色板中選擇或使用自己的自訂色彩方案，讓您的影像地圖更加個性化。
使用Draw Attention可以製作哪些內容？
展示房地產或新物業開發。為您的訪客提供虛擬之旅。讓他們從圖像地圖中了解更多。
製作互動式圖示和教程。想要更好地向您的訪客傳達信息？使用選定區域高亮顯示您所講述的重點。
突顯您在WooCommerce網站上的產品特色。增強您的網站與商品介紹，提高網站轉換率
原文外掛簡介
Draw Attention® makes it easy to create interactive image maps for your website. Highlight sections of your images with hotspots so that users can click/tap or hover to read more information about each image map area. Show more content or direct the user to another URL upon clicking or hovering your hotspot.
The image map can contain more information such as images, text, shortcodes, gallery, video, audio, and more. Reveal more information on click/tap or hover. Create custom shapes for interactive hotspots directly on your original image.
Perfect for sketch maps, interactive floor plans for real estate, clickable infographics, interactive affiliate content, sketch annotations, image tutorials, product feature highlights on WooCommerce, and more.
Image Map Features:
Draw Unlimited Hotspots: Highlight as many areas as you want in your image map
Highlight on Hover: Highlight different image hotspot areas when your site visitor moves their mouse over the interactive image
Customizable Colors: Choose your own custom color scheme for the image map to match your site
More Info on Click: When a highlighted area is clicked, show more information. Great to highlight points of interest on your image map
Go to a URL: Optionally send a site visitor to another URL when clicking highlightable hotspots on your image map
Responsive Design
Interactive image maps resize to fit your theme and the available screen size. Draw Attention works on all devices and adjusts your image to screens of any size. Works great on touch screens, such as tablet and mobile, too!
Accessible
Image maps are accessible to everyone who visits your site, regardless of device or capabilities. Your content is accessible to screen readers. All highlightable hotspots can be accessed by keyboard commands. Anyone on any device can use your interactive image map.
SEO Friendly Clickable Annotations
Draw Attention is built with the principles of progressive enhancement in mind, so your content is accessible even to users who have JavaScript disabled and is SEO friendly, too! Draw Attention draws SVG shapes in modern browsers and falls back to a standard image map if JavaScript is disabled.
Easy to Draw Image Maps
Easy to draw the highlightable areas of your image map – and easy to edit the shapes later too! Create the image map right from your WordPress dashboard. Place your interactive image map into any page or post with a simple shortcode, or use our convenient Beaver Builder module or WordPress Editor Block.
New and Improved Drawing Tool
Draw complex shapes or perfect circles and rectangles. Use the new zoom and pan feature to get extra precise drawings of your clickable hotspots. Easily edit the shapes whenever you’d like or start from scratch at the click of a button.
The available drawing tools are:
Polygon: Create a custom polygon shape of your preference
Rectangle: – Create a rectangle shape of any size
Circle: Create a perfect circle
Upgrade to Draw Attention Pro to get more features and customization options:
Create Multiple Interactive Image Maps (Pro only)
Need more than one interactive image map on your site? The Pro version allows unlimited highlightable areas on unlimited interactive images.
Annotation Layout Options (Pro only)
Show more info about highlighted image map areas in a variety of different layouts, including lightbox and tooltip.
Always Show Hotspots (Pro only)
Allow the image map hotspot areas to stay highlighted so visitors can see where they’re located, even when they aren’t clicked yet. The perfect way to show off your hotspots and make it clear that your images are interactive.
Define Multiple Highlight Styles (Pro only)
Use multiple highlight colors for the interactive image hotspots. If you choose to define multiple highlight styles, another section will pop up called, “Styles” where you can define your own color schemes within your image. Make each hotspot unique with it’s own color, border, and opacity settings!
20 Pre-Defined Color Palettes (Pro only)
Choose from one of 20 pre-defined color palettes or use your own custom color scheme on the image maps.
Upgrade to Draw Attention Pro Today! to get more features and customization options:
What could you make with Draw Attention?
Showcase (real estate)[https://wpdrawattention.com/demos/floor-plan/?utm_source=website&utm_medium=promo-link&utm_campaign=wordpress-org&utm_content=floor-plans] or a new property development. Give your visitors a virtual tour where they can explore floor plans and photos.
Sell booths to exhibitors at your trade show or conference by showing them an engaging interactive map of the trade show floor.
Make a product tour or tutorial documentation – explain your product by highlighting features in a visual way.
Interactive infographic – annotate and call out important areas on your infographic and show more information about those points of interest.
If you’re familiar with HTML image maps, we help you make those in a modern way that’s compatible with today’s devices & browsers.
Add another dimension to your Blog content by using interactive images to explain concepts or display affiliate links in an engaging way.
2.0.32 – 2025-03-25
Fixes
Fix Conflict with WP MapIt not displaying drawing tools
2.0.26 – 2024-06-18
Features and Improvements
Hid the move to trash button.
Widget live preview
2.0.24 – 2024-04-05
Fixes
Fixed Newsletter component showing up on different screens.
2.0.22 – 2024-03-19
Features and Improvements
Adding News Letter Notice to Draw Attention
2.0.17 – 2023-11-07
Features and Improvements
Tested up to WP 6.4
2.0.16 – 2023-10-29
Features and Improvements
Add nonce checks for additional security
2.0.15 – 2023-10-19
Fixes
Fix disclosed vulnerability affecting Contributor-level users
2.0.14 – 2023-08-12
Features and Improvements
Tested up to WP 6.3
2.0.13 – 2023-06-25
Fixes
Fix PHP warning in CMB2 library
Features and Improvements
Prevent conflicts with other plugins that use the leaflet library
2.0.12 – 2023-05-26
Features and Improvements
Improved nonce verification and capability checks
2.0.11 – 2023-05-12
For older changelog entries, please see the additional changelog.txt file delivered with the plugin.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Interactive Image Map Plugin – Draw Attention」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.1 | 1.2 | 1.5 | 1.6 | 1.8 | 1.0.0 | 1.0.1 | 1.0.2 | 1.1.1 | 1.1.2 | 1.1.3 | 1.4.2 | 1.4.3 | 1.4.4 | 1.4.5 | 1.5.1 | 1.5.2 | 1.5.3 | 1.6.1 | 1.6.2 | 1.6.4 | 1.6.5 | 1.6.6 | 1.6.7 | 1.6.8 | 1.6.9 | 1.7.0 | 1.7.1 | 1.7.3 | 1.7.4 | 1.7.5 | 1.7.6 | 1.8.1 | 1.8.2 | 1.8.3 | 1.8.4 | 1.8.5 | 1.8.6 | 1.8.7 | 1.8.8 | 1.8.9 | 1.9.0 | 1.9.1 | 1.9.2 | 1.9.3 | 1.9.4 | 1.9.5 | 1.9.6 | 1.9.7 | 1.9.8 | 1.9.9 | 2.0.0 | 2.0.1 | 2.0.2 | 2.0.3 | 2.0.4 | 2.0.6 | 2.0.7 | 2.0.8 | 2.0.9 | trunk | 1.6.14 | 1.8.11 | 1.8.12 | 1.8.13 | 1.8.14 | 1.8.15 | 1.8.16 | 1.8.17 | 1.8.18 | 1.8.19 | 1.8.20 | 1.8.21 | 1.8.22 | 1.8.23 | 1.8.24 | 1.8.25 | 1.8.26 | 1.8.27 | 1.8.28 | 1.8.29 | 1.8.30 | 1.8.31 | 1.9.10 | 1.9.11 | 1.9.12 | 1.9.13 | 1.9.14 | 1.9.15 | 1.9.16 | 1.9.17 | 1.9.18 | 1.9.19 | 1.9.20 | 1.9.21 | 1.9.22 | 1.9.23 | 1.9.24 | 1.9.25 | 1.9.26 | 1.9.27 | 1.9.28 | 1.9.29 | 1.9.30 | 1.9.31 | 1.9.32 | 1.9.33 | 1.9.34 | 2.0.11 | 2.0.12 | 2.0.13 | 2.0.14 | 2.0.15 | 2.0.16 | 2.0.17 | 2.0.18 | 2.0.19 | 2.0.20 | 2.0.21 | 2.0.22 | 2.0.23 | 2.0.24 | 2.0.25 | 2.0.26 | 2.0.27 | 2.0.28 | 2.0.29 | 2.0.30 | 2.0.31 | 2.0.32 | 2.0.33 | 2.0.34 | 2.0.35 | 1.0.0.1 |
延伸相關外掛（你可能也想知道）
Responsive Image Maps 》這個外掛包裝了RWD Image Maps jQuery外掛程式，讓它可以在 WordPress 主題上方便地製作反應式映射圖 (image maps)。, 這個外掛程式採用 GPLv2 授權，而 jQue...。
ImageMapper 》ImageMapper 是一個 WordPress 外掛，旨在為文章中的圖片添加互動功能。該外掛最初是為 Web 漫畫而設計，但由於其出色的自定義選項，它可以用於為任何類型的...。
WP Image Markers – Easy Hotspot Solution 》WP Image Markers 是一個標記建立工具，可幫助您添加多個標記（包括自定義工具提示），並將它們拖動到背景中的任何位置。, 出色且強大的管理界面，具有輕量級...。
Page Builder with Image Map by AZEXO 》這款 WordPress 外掛提供前端頁面建立功能，並附帶圖像地圖編輯及 HTML 原始碼編輯功能。, 展示影片, 附加元件, , 可用性圖像地圖 – 適用於公寓大樓展...。
Image Point 》Image Point 是一款非常輕量級且具有回應式設計的圖片地圖 WordPress 外掛程式，非常容易使用，在幾個點擊後，您將擁有一個美麗的圖片地圖。, 主要特色, , 無...。
Image Map Connect – Display Posts as Image Hotspots 》總結：, Image Map Connect 外掛允許在 WordPress 網站上添加圖片並將其轉換為互動式圖片地圖。, , 使用 Image Map Connect 外掛的功能包括：, - 將現有和/或...。
Image Mapper 》Image Mapper 外掛允許您設置圖片，使您的使用者可以點擊該圖像的部分以獲取更多資訊。非常適合用於樓層平面圖、汽車、房屋、解剖學等資訊。您可以使用 WordP...。
Address Locator on Image Map 》Address Locator on Image Map 是一個可以在圖像地圖上定位地址並且有篩選選項的 WordPress 外掛。, 安裝方式, , 將 WordPress 外掛下載至您的電腦桌面。, 如...。
SlicPix Interactivity Studio 》, - ,
- 摘要：Interactivity Studio 的 WordPress 外掛讓您能夠在您的網站上創建並嵌入互動、可點擊和可購買的圖像或 SVG 地圖...。
Interactive Image – Real Estate Visualizer & Image Map 》總結：Interactive Real Estate 是一款創新的 WordPress 外掛，可用於創建互動建築和物業展示。這款外掛提供易於使用的短代碼和時尚的管理界面，讓使用者能夠...。
PicPoints 》```html, , , , , 總結：
,PicPoints 是一個外掛，可讓您將互動地圖和可點擊...。
WP Supersized Image Map 》創建映像地圖本來就很容易，對吧？但是，當您需要全屏幕背景並且需要設置某些圖像在上方時，應該怎樣做呢？, 步驟 1：獲取 jQuery（可在此處完成： http://jq...。