Interactive Image Map Plugin – Draw Attention

Descripción

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

Diseño adaptable

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!

Accesible

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:

Crea múltiples imágenes de mapas interactivos (solo Pro)

¿Necesitas más de una imagen de mapa interactivo en tu sitio? La versión Pro permite áreas resaltables ilimitadas en imágenes interactivas ilimitadas.

Annotation Layout Options (Pro only)

Muestra más información sobre las áreas resaltadas en la imagen del mapa en varios diseños diferentes, incluyendo cajas de luz e informaciones emergentes.

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 paletas de color predefinidas (solo Pro)

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:

¿Qué puedes hacer con Draw Attention?

  • Presenta inmuebles o el desarrollo de una nueva promoción. Ofrece a tus visitantes un recorrido virtual donde puedan explorar planos de planta y fotos.
  • Vende stands a los expositores en tu feria o conferencia mostrándoles un atrayente mapa interactivo del plano de la feria.
  • Haz un recorrido del producto o un tutorial de documentación – explica tu producto resaltando las características de una manera visual.
  • Infografía interactiva – Anota y llama a importantes áreas en tu infografía y muestra más información sobre esos puntos de interés
  • Si estás familiarizado con los mapas de imagen HTML, te ayudamos a hacerlos de una manera moderna que es compatible con los dispositivos y navegadores actuales.
  • Add another dimension to your Blog content by using interactive images to explain concepts or display affiliate links in an engaging way.

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

Fixes

  • Fix Elementor popup duplicating DA images

Features and Improvements

  • Update gutenberg block to use api version 2

2.0.9 – 2023-04-11

Fixes

Features and Improvements

For older changelog entries, please see the additional changelog.txt file delivered with the plugin.

Capturas

  • Dibuja tus áreas resaltables en el escritorio
  • Los visitantes del sitio pueden hacer clic para obtener más información sobre las áreas resaltadas
  • Sube un plano de planta y muestra las fotos de detalle de cada habitación
  • Personaliza los colores y la apariencia de las áreas resaltadas
  • Add in unlimited hotspot areas to your interactive image

Bloques

Este plugin proporciona 1 bloque.

  • Interactive Image Map Plugin - Draw Attention

Instalación

  1. Navega a ‘Añadir nuevo’ en el panel de plugins
  2. Busca ‘draw attention’
  3. Haz clic en ‘Instalar ahora’
  4. Activa el plugin en el panel de plugins

Instalación manual

  1. Navega a ‘Añadir nuevo’ en el panel de plugins
  2. Navega al área ‘Subir’
  3. Selecciona draw-attention.zip en tu ordenador
  4. Haz clic en ‘Instalar ahora’
  5. Activa el plugin en el panel de plugins

Después de la instalación

  1. You’ll see a new Draw Attention menu item on the left sidebar of the WordPress Dashboard
  2. Create your interactive image. We have a guide to walk you through how to create the image.
  3. Una vez creada la imagen, puedes incrustarla en cualquier página o entrada con el shortcode [drawattention].

FAQ

¿Qué se ha añadido a Draw Attention Pro?

La versión Pro incluye:

  • Capacidad para crear más de 1 imagen interactiva
  • Número ilimitado de áreas resaltables en cada imagen
  • 20 esquemas personalizados de color
  • Opciones de diseño personalizadas (cambiar la posición de la caja Más información o usar una caja de luz o una etiqueta emergente)

¿Dónde puedo encontrar documentación y aprender cómo usar el plugin?

We have tutorials, videos and other helpful information on the Draw Attention website

I have a question or need help with the plugin, how do I contact your support team?

To contact our support team, submit your message through our WordPress support forum. Or, visit our website’s Contact page.

If you’re using our Premium plugin, you can also use the License & Support tab within the Draw Attention Pro plugin settings to send us a direct email.

¿Cómo dibujo mi primera imagen?

We have a guide walkthrough of creating your first image available in our documentation.

Reseñas

1 de abril de 2024 1 respuesta
Draw Attention is super easy to use and functions exactly as you'd want and expect. Don't just take my word for it - search YouTube for reviews of the product and helpful videos about how to use it. You're going to love it!
12 de marzo de 2024
Before you invest too much time in the learning curve and the time spent to add your hotspots, please note that it appears you can only have 1 image in the free version. So if all you needed were 2 images, the second one will cost you $99.
21 de diciembre de 2023 1 respuesta
Surprise? Perhaps I shouldn't have been. Superb customer support here at Draw Attention. I have some pretty bonehead problems but the team handled them smoothly and without making me feel the least bit, uh, stupid. Even when I came back with the same or a similar problem three times in a row. When I finally figured out it wasn't their problem, they still didn't scold me in the least! Thank you, DA team.
19 de diciembre de 2023 1 respuesta
The response time after I made the ticket was really fast. The problem was solved interactivly and again it was fast again!
11 de octubre de 2023 1 respuesta
Draw Attention allows flexibility in your design and the end product is a great looking image map. I had an obscure question and their support was fast, friendly, and helpful. This is the product for image maps in WordPress.
31 de agosto de 2023 1 respuesta
We have developed several apartment rental modules for various customers with Draw Attention Pro. The plugin has proved particularly effective and stable. It's an inexpensive solution for a floor selector, and a very effective one at that. Support is also very present and eager to help. I really recommend using this plugin, you'll be pleasantly surprised!
Leer todas las 102 reseñas

Colaboradores y desarrolladores

«Interactive Image Map Plugin – Draw Attention» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Interactive Image Map Plugin – Draw Attention» está traducido en 4 idiomas. Gracias a los traductores por sus contribuciones.

Traduce «Interactive Image Map Plugin – Draw Attention» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.