Image Map Experiment

[Norm]

Today I have a new Custom Interaction experiment to share with you, requests for image maps have come up a bunch of times on the forum and I thought @SpookyDoo’s recent how to guide on how to create one was brilliant. I wanted to see if I could improve on his concept and add a little more polish

The Structure
The image map is built inside of a Stack Container Div, with an additional class added to set the main container position relative (we need this in order to keep those points of interest positioned well across breakpoints).

As you can see, the main image is at the back (purple), then the points of interest (SVG Icons - Dark Blue) and finally an additional div that contains our info overlay (green).

Like @SpookyDoo did in his example, I’m also using SVG Icons for the points of interest. Because we are using a Stack Container, all of our points of interest are automatically layered on top of the main image, however I have also set their position to absolute so that I can position them with percentages.

Here is an example of one of the classes used to position a point of interest. These can also be tweaked for each breakpoint if required.

The final part of the structure is the information overlay, this is a div container (#info-overlay) with a heading (#info-title) and paragraph (#info-desc) placed inside. Notice that the information overlay div container, heading and paragraph all have #ID’s applied, we need these in order to control this part of the UI from our interaction.

Styling
I wont get into the weeds on the custom classes, but initially I have the info overlays opacity set to 0 so it is hidden, the custom interaction will apply a class (show-info) to make it appear (opacity: 1). So watch out for that when you play around with the experiment file.

Data Attributes
I’m going to give each point of interest a data attribute for the title and description. Later on I’ll pull these into my custom interaction using the data() short code to populate the info popover text for each point.

Custom Interactions
I use two custom interactions to power this image map. The first interaction is responsible for showing the info popover (Add Class rule) and setting the title and description (Set Text rule).

The second interaction will be used to hide the info popover, this one is pretty simple, we just remove the show-info class, which causes it’s opacity to return to 0.

Finally I hook up the interaction triggers to each point of interest. Notice that the showInfoPopover is triggered on Click and Hover, this is important for mobile, as hover events are not triggered on touch screens that don’t have a pointer device connected.

The hideInfoPopover interaction is triggered when the mouse leaves a point of interest. On mobile, this will trigger when a user touches the screen outside of the point of interest.

And thats it, you can now create your own custom built image maps using Stacked Containers, Custom Classes and Interactions.

Another job done without pasting in custom code. #BlocsRocks #NoCode

---

Download Image Map Experiment (394.9 KB) - (Requires Blocs 6.2)

[calibinder]

Thank You Norm, this is great! So many uses for bringing back a reboot of image maps that works with modern browsers is excellent.

[SpookyDoo]

Superb @Norm! I must admit when you announced Stacked Contaniers I thought I bet they could play a strong or better part in an image map process, this is great. Custom Interactions and now Stacked Containers are both in their own right powerful features, but together there is so much potential. Can’t wait for the weekend to have a really good play with Stacked Containers, really busy at the moment and itching to experiment. Bob on!

[JDW]

@Norm
I was playing with your Blocs document today, and I am quite impressed by how it works.

QUESTION: Is it possible to allow for click events too?
Meaning, when you mouseover, it will display the text overlay as you have it now, but if they click and release the mouse button, it would do something like open a specific URL, or toggle a Modal.

WHY I ASK: I have a product photo of a security system with a siren. When someone does a mouseover, I want to display a text overlay just like your example, but if they then CLICK, I want to open a Modal that plays the siren sound.

EXAMPLE: Open this URL. Then click on the Siren. You will then see the modal toggle, allowing you to play the sound. I want to retain that functionality, but I also want to incorporate your little mouseover dots that will open text overlays too.

UPDATE
Never mind. I figured it out.

I added a new interaction named TM which toggles the Modal, and I substituted that new “TM” interaction for the one you setup for “Click” in the right sidebar. Now I can mouseover to get the text overlay like this…

And then when I CLICK, it nicely toggles the modal like this…

All good now!

[JDW]

Well, scratch that. It’s not “all good now.”

It only works in the sample document you provided, @Norm. When I implemented it in my existing document, nothing works. Neither the Modal toggle, nor the Popover content.

Here’s a cut-down version of my site, showing only a single page:

OverlayTest.zip (1.4 MB)

NOTE: The above document uses BS4. When I switch it to BS5, the Modal toggle then starts working, but the Popover content still won’t appear as I mouseover the blue dots.

Any thoughts?

Also note that when you open my document above, it will show this oddball message, even though those Assets aren’t used at all!

[JDW]

THE GOOD NEWS
I fixed the non-displaying text overlays. Blocs is being non-cooperative, it seems. Despite having enabled the “Required Bloc Classes” in the dialog below, Blocs decided NOT to copy over the “show-info” class when I put that copied Bloc into my main document.

So I manually added “show-info” and created all the appropriate settings, and then the overlays started to appear on Mouseover!

===============================

BUG?
Blocs doesn’t consider that “show-info” class to be “used” even though it is indeed used in Interaction Manager. So if you ever try to Delete Unused Classes in the future, you most assuredly WILL NOT remember you used that particular class, and it will get deleted, as per what you see in this screenshot…

If it is impossible fix Blocs by making classes used by Interactions be “Used” classes, then it means “Delete Unused Classes” is a feature we need to avoid. Otherwise, we risk breaking something. And that would be unfortunate because there is a lot of “cruft” that needs to be cleaned out of our documents over time. “Delete Unused Classes” is nice to delete that cruft.

===============================

THE BAD NEWS

Why does Blocs refuse to toggle my modal when my document is set to BS4?

When I preview in Safari and open the Console, then click the dot, this error appears…

If I return to Blocs and switch the document to BS5, clicking the blue dot to toggle my Modal works. You can test that by downloading my document (note that the “show-info” class is missing, but that is irrelevant to this particular test)…
OverlayTest.zip
…then Preview and click on the blue dot near the siren. The Modal (which allows you to play audio) will NOT appear. Then switch the document to BS5 and Preview and click the dot and you’ll see the Modal toggle!

Why only BS5?

[BAM]

I also get this popup from a few older Blocs 4 / 5 projects.

[TrevReav]

Did you save as a bloc and add into the project from there?
Whenever I’ve tried that, unless it’s very simple, the bloc always ‘loses’ something. Most recently it was 3 buttons toggling modals, and everything came across into the blocs project, but none of the modals would toggle.
I ended up rebuilding.

[JDW]

@BAM

I also get this popup from a few older Blocs 4 / 5 projects.

I think you are talking about the Missing Assets dialog, and yes, that really does need some work in Blocs to fix. But that error only happened to me today after I deleted all pages but one in my document, and then I opened Asset Manager and chose Delete Unused Assets. I then noticed it didn’t delete all the unused Assets, forcing me to manually delete them. I then saved that document. After that, I did File > Export > Generate Package and upon opening that generated document (the one I linked in my previous posts), it complains about missing Assets!

@TrevReav

Did you save as a bloc and add into the project from there?

I opened Norm’s document, selected the Bloc, then saved it via this command…

I closed that document, then opened my own document (a stripped down version being the document I linked in my previous posts), then added that Bloc to the page.

But! The Modal I am talking about already existed on my page. There is no modal in Norm’s document. And if you read the end of my previous post, you’ll see the ONLY thing still not working is triggering that Modal with Interactions. It refuses to toggle in BS4. Switching to BS5… Poof! It magically starts toggling. It boggles my mind!

[Norm]

@JDW

Poof! It magically starts toggling. It boggles my mind!

There are various code changes between those two frameworks BS4 and BS5, especially regarding JS and the data attributes used under the hood to trigger things like modals. What may be happening is the Bloc is saved for use in Bootstrap 5, then you put it into a Bootstrap 4 project, so none of the data attributes are correct.

Stored Blocs are forwards compatible but not backwards. So going from 4 to 5 is supported but not the other way around. I would highly recommend moving your site to Bootstrap 5, as 4 will be removed from Blocs eventually for reasons like this.

As for the missing classes I’ll check that, and get it fixed up.

[Norm]

@JDW

Why does Blocs refuse to toggle my modal when my document is set to BS4?

I’ll also check that out, the exported code may need a little tweak for BS4.

[svimic]

Hi there, thanks @Norm for this image map.
Exactly what I need for a developing website to add an interactive plan of the buildings.

Quick (silly) question: how do I import the bloc or the page template into an existing project ?

Want to make sure it is possible or if I have to built it from scratch in my project.

Thanks.

[svimic]

I reply to myself: it was indeed a silly question.
I didn’t see it was a .bex file !

So I imported it and created a new page in my project. And see that custom interactions are not imported. So I’ll have to re-create them.

[Norm]

Yes, custom interactions are not transferable yet, but they will be at some point.

[Bootsie]

At some point?

[JDW]

@Norm

I would highly recommend moving your site to Bootstrap 5, as 4 will be removed from Blocs eventually for reasons like this.

One thing I dislike about BS5 is something that has been true since Blocs first implemented it, and that problem continues even in Blocs 6.2.2…

BS4-to-BS5 PROBLEM:
Immediately after switching an existing document to BS5, all my text links, including those created by Code Widgets, suddenly are underlined! I don’t want any of my links underlined.

Bothersome Workaround
So what that huge problem forces me to do is hand-edit every single link related Class like this:

Class Editor > Text > Decoration > click Underline and then click X to kill the underline!

Yeah, it’s that messy.

But it gets worse. I am forced to Edit every single Code Widget which creates a link in my site in order to add a new Class which does nothing other than kill the Text underline. (I create that new Class, then click Underline and then kill the Underline. That’s all the class does.)

Honestly, I think this is a bug in the way BS5 is implemented in Blocs. And if it is a bug, it’s existed for as long as BS5 has been in Blocs. Because I remember it happened when BS5 first came out and I tested it. That was one of the many reasons I never switched any of my documents from BS4 to BS5.

Thoughts?

[JDW]

@Norm

Data Attributes
I’m going to give each point of interest a data attribute for the title and description. Later on I’ll pull these into my custom interaction using the data() short code to populate the info popover text for each point.

Norm,

There are times when I need to add a line break in the popover text (not the title, but the body text). Custom Attributes doesn’t allow that. I tried adding “< b r >” (without the spaces) in data-desc, but it simply shows “< b r >” as text when I preview the popover content. It doesn’t add the desired line break.

It would also be neat to be able to make some words bold or even color part of the text red. In other words, be able to wrap some words in a Span.

None of that is possible if we are forced to use data-desc to enter the popover text.

[Norm]

@JDW

Immediately after switching an existing document to BS5, all my text links, including those created by Code Widgets, suddenly are underlined! I don’t want any of my links underlined.

The links are underlined by default as part of Bootstrap 5 which is not created by us. So this is indeed one of the visual changes you can expect when moving from Bootstrap 4 to Bootstrap 5.

It’s the default setting for the framework.

It’s also mentioned here on the Blocs knowledge base under styling.

​Here is a way to remove underlines from all links.

I hope that helps

@JDW

There are times when I need to add a line break in the popover text (not the title, but the body text). Custom Attributes doesn’t allow that. I tried adding “< b r >” (without the spaces) in data-desc, but it simply shows “< b r >” as text when I preview the popover content. It doesn’t add the desired line break.

It would also be neat to be able to make some words bold or even color part of the text red. In other words, be able to wrap some words in a Span.

None of that is possible if we are forced to use data-desc to enter the popover text.

Blocs data attributes are plain text only at the moment.

[JDW]

@Norm

Blocs data attributes are plain text only at the moment.

Norm,
But even when dealing with “plain text” we usually still have the means (in programs like TextEdit, anyway), to add carriage returns (line breaks).

Is there some cunning way I can trick Blocs into adding a new line?

So instead of this…

This is sentence number 1. And this is sentence number 2.

I would like this…

This is sentence number 1.
And this is sentence number 2.

Thanks.

[Blocs_User]

@JDW

Is there some cunning way I can trick Blocs into adding a new line?

Since Blocs currently only supports plain text for data-attributes, try using a “line feed” unicode character as an HTML entity 
 as it’s plain text.

The only covet is you will need to apply CSS white-space: pre; or pre-wrap in order for that to work. CSS white-space.

Here is a basic example showing how this typically works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Line Feed Comparison</title>
  <style>
    p {
      border: 1px dotted black;
      padding: 1em;
      max-width: 400px;
      margin-bottom: 1em;
    }
    .with-prewrap {
      white-space: pre-wrap; /* or pre */
    }
  </style>
</head>
<body>
  <h2>Line Feed without ❌ white-space: pre-wrap</h2>
  <p class="without-prewrap" data-desc="Line one&#10;Line two&#10;Line three">
  </p>
  <h2>Line Feed with ✅ white-space: pre-wrap</h2>
  <p class="with-prewrap" data-desc="Line one&#10;Line two&#10;Line three">
  </p>
  <script>
    function getData(c) {
      const e = document.querySelector(c);
      const t = e.getAttribute('data-desc');
      e.textContent = t;
    }
    getData('.without-prewrap');
    getData('.with-prewrap');
  </script>
</body>
</html>

The only thing you need in Blocs to test if this will work is the line feed unicode character HTML entity – 
 in your data-attribute and a CSS class setting white-space: pre or pre-wrap;. Additional line feeds can be used for added separations.

Let me know if the concept works in Blocs.