Features I can REALLY use

The hover/mouseover is planned for one of our next releases. We wanted to start with click/tap to view to make it more mobile friendly right off the bat.

The pro version actually already offers other options for the new image and content text: left, right, bottom, or a lightbox. To see a couple of examples of the pro version in action, check out the examples on our demo site.

Hi archerdata, the pro version allows for the image to be on the left, right, bottom, or in a lightbox. Some of these are in samples at:

https://wpdrawattention.com/floor-plan/
https://wpdrawattention.com/tag-photos/
https://wpdrawattention.com/teaching/

Here’s a screenshot of how you can control it in the admin:
https://www.evernote.com/shard/s2/sh/35c1f9c0-820a-42c6-b61b-27f5ead525f0/8fe6111d6fb9fde86e1020472bc45576/deep/0/draw-attention-pro-layout-options.png

We’re planning on adjusting the free version as well so it’s not as jumpy in the scenario you describe. For right now, your best bet might be setting a fixed height in CSS that works consistently for your different “More info” images.

Hope that helps, and let me know if I’m misunderstanding what you’re asking. Thanks!

I am experimenting with the CSS to see if I can reposition the images within the .hotspots-image-container

Is there any easy way to NOT show the hotspot boxes at all? It’s cool if the cursor changes, but they are annoying as the last hovered hotspot does not go away.

We plan to offer a “click-off” the active hotspot in the upcoming release. For hover/mouseover, the last hotspot & more info would automatically go away when you roll off the image (or to a part of the image without a hotspot).

Okay, here’s what I’ve got … all images are the same size: 540×305. The image map is on the left and (when clicked) the zoomed image appears immediately to the right of it.

I managed to reposition the two images using the CSS below:

.hotspots-image-container {height: 305px !important;}
/*  POSITON OF THE MAPPED IMAGE  */
.hotspots-image, .hotspot-content {
position: absolute;
top: 0px !important;
left: -270px !important;
height: 305px !important;
text-align: none !important;
}
/*  POSITION OF THE ZOOMED IMAGE  */
.hotspot-thumb {
position: absolute;
top: 84px !important;
left: 585px !important;
height: 305px !important;
text-align: none !important;
}

The remaining problem is that while the images are both in the right place, the hotspot map remains centered and I am having difficulty locating the class that controls the positioning of the map, which I thought was .hotspots-map … but it doesn’t seem to work. Perhaps I am doing something wrong here. Let me say this another way:

When I hover over the correct spot on the image map, the highlighted gray boxes appear, but shifted to the right.

I am so close.

I think that absolute positioning may cause some issues on mobile/responsive layouts. Are you trying to achieve the “info box on the right side” layout?

If this is what you’re trying to get:
https://wpdrawattention.com/tag-photos/

then that’s a simple layout option available in the pro version. Or are you trying to do something different?

The image I have is of an industrial production line machine. When hovered over, the hotspots cause the gray boxes I made to appear, but the group of them are centered in the .hotspots-image-container space … at least I believe so.

When clicked, regardless of where the gray boxes are, everything works fine and a close-up image of that part of the machine appears. There is no info displayed other than the title of the image.

The client is not concerned about mobile/responsive layout.

The site is not publicly viewable, otherwise I’d give you a link.

I want to shift the hotspot map (the group of gray boxes) from the center of .hotspots-image-container to the left -270px so it lines up with the underlying image, but I don’t know the class name that controls the gray boxes.

I believe you’re trying to left-align the clickable image inside its container instead of the center alignment it has by default. You definitely don’t want to use absolute positioning for that because as you’ve discovered, that throws off the calculations for the clickable areas of the image. You should be able to add this CSS:

.hotspots-image-container > div,
.hotspots-image-container img {
margin: 0;
}

to left-align the image in its container.

What I am attempting to do is to have the right edge of the image map rest on the center line of the container and to place the left edge of the zoomed image on the same center line. The images are all 540×305, so a double-image will be 1080×305, which easily fits in the space available in the full-width Customizr theme.

***SOLVED***
This works perfectly:

/*  POSITON OF THE MAPPED IMAGE  */
.hotspots-image-container > div {
position: relative;
top: 0px !important;
left: -270px !important;
height: 305px !important;
text-align: none !important;
}

Hi archerdata, just following up to let you know that we released version 1.1.1 which has a number of improvements. However, it also fixes the default layout (it was always intended to show the More Info box to the left of the map). However, I’m guessing that this change will affect your customization.

The pro version of course has different pre-built layout options for showing the More Info box on the left, right, bottom, and in a lightbox if those options are preferable based on your use case.

Let us know if you have any further issues or questions with the plugin

Okay … TOTALLY UNRESOLVED.

? Everything previously done is broken.
? Arbitrarily, all zoomed images are no longer 540×305
Draw Attention has decided to make them 259×146.

How do I restore the images to their original size?

I do not want more info at all.

Sorry that update broke your CSS, we made a mistake in our 1.0 release about the More Info box positioning. It shouldn’t be changing again.

Most users need the More Info so visitors can learn more about sections of the image, but it can be hidden entirely. If you set the wrapper for the more info box to CSS display: none; then it will be hidden, and the main image should be full-width in the area.

I hope that helps, let me know if you’re still stuck and we’ll try to get it resolved for you.

.hotspots-image-container {background: #efefef;}

I cannot override this to change the color to white. Even if it’s in the wrong place, is would disappear against the white page it’s on.

I cannot locate in your CSS files the selector of the more info box.

.hotspots-placeholder {
 display: none;
}

should do the trick to hide the More Info box. Let me know if that works for you