Features I can REALLY use

DrawAttention is designed to be responsive. That means that all parts of the plugin resize to fit within the space available in your selected theme. If things are much smaller than you’d like, check to see if your theme as a full-width page template available, which should provide more space for the image and associated more info box.

I’m not sure why you’d want to completely hide the more info box – that would prevent your site visitors from seeing any additional information about the clickable areas of the large image. If you upgrade to the Pro version, we have a lightbox option that will let you show the more info box as a lightbox, which gives you more room for both the clickable image and the more info box.

You’re correct – the .hotspots-image-container background color is difficult to override, and we’ll fix that in the next release. In the meantime, you can add the ID of your hotspot in front of your selector to change it. I can’t give you the exact ID without being able to see your site, but if you inspect the HTML, you should be able to spot it. Your CSS should look like this:

#hotspot-38 .hotspots-image-container {
background: #fff;
}

We can’t really provide specifics on modifying the appearance and layout without being able to see what you’re working on.

Since the site I am working on is not publicly available yet, I have taken a few screenshots so you can see what I am talking about.

This is the page when it comes up and it’s great:
https://www.aonx.net/images/Turnbak-Interactive-1.jpg
You can see one of the hotspots highlighted.

This is the page when the “zoomed” image is placed. Notice the dark .hotspot-placeholder box and the .hotspots-image-container box colored #efefef.
https://www.aonx.net/images/Turnbak-Interactive-2.jpg

After adding to the CSS:
#hotspot-117 .hotspots-image-container {background: #fff;}
it looks like this:
https://www.aonx.net/images/Turnbak-Interactive-3.jpg

If I could change the hight of the dark box to 305px or change the color to white, that will work for now.

Is it possible to edit the AREA TYPE and COORDS to something else? I have the coordinates for circles around the hot spot points. A nice feature would be to check a box and manually enter the shape type and the coordinates when they are already known.

YAY! This is what worked:

.hotspots-placeholder {height: 305px !important; background: #fff !important;}
#hotspot-117 .hotspots-image-container {background: #fff !important;}

Hello,

I’m hoping to use the plugin for a map.

I have two questions:

1. Is it possible to have the image with hotspots display without the content area on the left of the image? I can remove it in the CSS but the hotspot and image separate when the page is zoomed so I’m a bit worried about how it will perform in different viewports.

2. Do you know why the page doesn’t load cleanly with the image in it? I can see a fill area that disappears when the page loads completely.

Thanks!

Deborah

Hi Deborah –

Are you linking all of the hotspots in your image to a URL instead of using the more info area? If so, then the image will display without the content area on the left. If you want to display the more info area, but not on the left, then the pro version of the plugin offers several different layout options.

Can you share a link to the page where you’re having issues with the image loading so we can take a look? This doesn’t sound like a problem we’ve come across before.

Hi Natalie,

That’s right I’ want to link the hotspots to separate URLS.

The container for the more info area can be removed in the CSS but when I zoom the page in and out the hotspot shifts.

The problem with the page loading cleanly seems to have been fixed by adding other content to the page.

The page is https://inats-dev.azurewebsites.net/running-routes

I’ve been trying to work with a slider as a second option but it’s not the right kind of tool – that version is in the top of the page.

Thanks for your help.

Deborah

Hi Deborah –

If you create a Draw Attention image and indicate that all of the hotspots link to external URLs, the more info box will automatically be hidden – you don’t have to do anything extra to hide that out of the way. If even one single hotspot has more info instead of a URL, then the more info box will display.

I took a look at the page you sent, but I cannot see a Draw Attention image on that page – just an accordion. Is that something that you’re still working on?

Hi Natalie,

Thanks – I took the Draw Attention image off the page I sent because it seemed to be affecting the visual composer.

I’ve put it in a separate page:

https://inats-dev.azurewebsites.net/draw-attention-sample-page/

Regards,

Deborah

Actually – I’ve got it now. I removed the second clickable area and the image scales normally.

Case closed!

Thanks,

Deborah

Glad that worked! ??