Interactive Image Map Plugin – Draw Attention

説明

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

レスポンシブデザイン

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!

アクセス可能

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 は、プログレッシブエンハンスメントの原則を念頭に置いて構築されているため、JavaScript が無効になっているユーザーでもコンテンツにアクセスでき、SEOにも配慮しています！Draw Attention はモダンブラウザではSVG 図形を描画し、JavaScript が無効になっている場合は標準のイメージマップに戻ります。

簡単に描けるイメージマップ

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:

• 多角形: 任意の多角形を作成
• 長方形: – 任意のサイズの長方形を作成
• 円: 正円を作成

Draw Attention Pro にアップグレード して、より多くの機能とカスタマイズオプションを手に入れましょう:

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

修正

• Fix Conflict with WP MapIt not displaying drawing tools

2.0.26 – 2024-06-18

機能と改善点

• Hid the move to trash button.

• Widget live preview

2.0.24 – 2024-04-05

修正

• Fixed Newsletter component showing up on different screens.

2.0.22 – 2024-03-19

機能と改善点

• Adding News Letter Notice to Draw Attention

2.0.17 – 2023-11-07

機能と改善点

• WP 6.4まで動作確認済

2.0.16 – 2023-10-29

機能と改善点

• Add nonce checks for additional security

2.0.15 – 2023-10-19

修正

• 寄稿者ユーザーに影響を与える、公開された脆弱性の修正

2.0.14 – 2023-08-12

機能と改善点

• WP 6.3まで動作確認済

2.0.13 – 2023-06-25

修正

• Fix PHP warning in CMB2 library

機能と改善点

• Prevent conflicts with other plugins that use the leaflet library

2.0.12 – 2023-05-26

機能と改善点

• Improved nonce verification and capability checks

2.0.11 – 2023-05-12

古い変更ログエントリについては、プラグインに付属する 追加の changelog.txt ファイル を参照してください。