Want to change javascript addEventListener from mouseover hover to click

JavaScript
1

Ive created a map with svg hotspots. hovering over numbers on the map show an info card for that location, and hovering off hides it again. I need to change the addEventListener to click to show the info card, and click again hide it.

Or any other way so that it will work on mobile. My level of javascript is basicly cut and paste.

this is example code of one of the svg paths with info card that shows and hides on hover addEventListener:

<a href="http://travelalberta.com/" target="_blank"><path
        style="opacity:0.267692;fill:#000000;fill-opacity:1;stroke-width:3.02576"
        d="m 709.75728,1371.5375 -41.49855,17.706 -40.86009,-83.0822 -4.46906,-27.9211 24.26069,-11.577 26.17599,8.853 30.00662,44.2651 z"
        id="path1380"
        inkscape:label="y17" 
        data-text="<h4>Holiday Inn Bayview</h4><h5>2200 Cliffe Ave, Courtenay,</h5><h5>Courtenay, BC</h5><h6>Website link in legend below.</h6>"/>
        </a>

This the javascript:

<script type="text/javascript">
    let paths = document.querySelectorAll("path");
let cardWidth = card.getBoundingClientRect().width;
let cardHeight = card.getBoundingClientRect().height;

paths.forEach((p) => {
  p.addEventListener("mouseleave", (evt) => {
    card.style.visibility = "hidden";
  });
  p.addEventListener("mousemove", (evt) => {
    let pos = oMousePos(svg, evt);
    let text = p.dataset.text;
    card.style.visibility = "visible";
    card.style.top = pos.y + "px";
    card.style.left = pos.x + "px";
    card.innerHTML = text;
  });
});

function oMousePos(element, evt) {
  let ClientRect = element.getBoundingClientRect();
  let currentX = Math.round(evt.clientX - ClientRect.left);
  let currentY = Math.round(evt.clientY - ClientRect.top);

  //close to right
  if (evt.clientX + cardWidth >= ClientRect.right) {
    currentX = Math.round(evt.clientX - ClientRect.left - cardWidth);
  }
  //close to bottom
  if (evt.clientY + cardHeight>= ClientRect.bottom) {
    currentY = Math.round(evt.clientY - ClientRect.top - cardHeight);
  }
  return {
    x: currentX,
    y: currentY
  };
}
</script>

and this is the link to the working map
https://illomaps.net/comox_hotlist.html

Ive been stuck on this for awhile, any suggestions would be greatly appreciated.

4

#1:I would suggest having an onhover effect anyway to highlight the fact that you CAN click on the numbers.

#2: The touchmove event is equivalent to the mousemove event for mobile devices. That said, not many people are going to be dragging their fingers across that map, so click is probably still a good idea.

#3: Consider using both mousemove and click, bound to similar (practically identical) functions; the click function will need a latch toggle to open/close.

#4: Your current code for me puts the hover effect remarkably far away from my mouse - to the point that if i hover over things near the top of the screen, it makes the card unreadable. Refinement of the original code may be warranted.

2 Likes
5

Have you thought that through?

I assume that those hot spots are all links to somewhere else and if you click to show and then click to hide how are you ever going to let someone navigate to the destination?

Or are you happy that they scroll down and click the links that you have below?

To move the popover box to the target then add the following css:

.w3-hover-text-gray  {
  position: relative;
  display: block;
}

If w3-hover-text-gray is a a utility class used elsewhere then add an extra class to that element and use the new class instead. (Note that it is actually invalid in html to nest links within links (even if the links are in an svg). That surrounding anchor should be a div and not an a element.

2 Likes
6

Wait a minute I think you may have not closed the a tags above properly. I will need to take another look (later after dinner). You should use a div anyway as I mentioned to wrap the svg and then add the class to that.

7

theres a few points I never considered. Ill have do some research on onhover.
The css I can do, I realize the pop up is too far. My main concern right now is getting the hotspots to click. Thanks for the suggestions

8

Here’s a very rough demo with the hotspots working on touch to switch on and off. The link won’t be followed for touch but will be followed on hover devices.

As I mentioned your anchors weren’t closed above the svg so that leaked into the rest of the page. I’ve added a div around the svg so that the popovers show properly. I also linearized the bottom table for smaller screens as it made the mobile version shrink or overflow as it was too wide.

The popups are too big and probably should be more like this:

There is a lot more to do and a lot of the structure is wrong but that’s something you can work on later :slight_smile:

The demos are just basically to see if this is the effect you were going for?

Edit: Sorry, I’ll need to get back to this as the demos are not properly working yet.

2 Likes
9

Ignore the other demos for now (apart from the html changes I mentioned you should make).

Here is just the svg as a standalone that works on desktop and on touch. On hover devices you can hover to show the tooltip and then click and it will go to the link that you supplied around the path. On hover devices a touch will only show and hide the tooltip as required and not go anywhere else.

Obviously on a small phone you can hardly see the trigger areas without zooming so you may need to rethink how to handle this.

You could add the number from the label attribute in the path to the popover to make it easier to see.

However that still needs some work to be useful for small screen (note the js contains some repetition but was easier to keep touch and hover code separate for now).

Note you seem to be missing a hotspot for number 36.