World Map with hover highlight and tooltip stack


(Bill Fleming) #1

Any stack out there that could highlight a country in a world map which a mouse cursor is hovering over and display a tooltip but still clickable?

Something similar to the one at this website

https://team.org/?gclid=CjwKCAiAweXTBRAhEiwAmb3Xu8YrjaAfkOh2GeJD9WA28AHTVx8ZNBuP3JYsvqkxwCs1sHskbWE55RoC9vEQAvD_BwE


(Robert Ziebol 🖖🏼) #2

Have you looked at the Points stack by Joe Workman?!
http://joeworkman.net/rapidweaver/stacks/points


(Jason Bostick) #3

I thought Points at first too, unless highlight the entire country outline is the thing you’re going for…
Looks like there are 3rd party solutions that you could get to do this such as this: https://codecanyon.net/item/interactive-maps-generator/3272382?ref=sdeering&clickthrough_id=1186505382&redirect_back=true (I have no experience with this link, just a thing I came across on Google)


(Bill Fleming) #4

Yes, I have that stack and I am using it now but it only does “Dots” . You can see a preview of it at https://www.agwm.org/previewtopbar/ . Scroll all the way to the bottom. I am using both points2 and peek-a-boo to accomplish this.

I wanted to highlight a continent when a cursor is hovered over.


(Bill Fleming) #5

That might be something I am looking for . I wonder if it can be set up in RW


(Jason Bostick) #6

Or this, which looks free: https://cssmapsplugin.com/

It looks like it’d be possible in RW - they have some instructions of which code to put and where…


(Will Woodgate) #7

ImageMapper + Super Tooltips could be a great combo:

Currently the detection area in Super Tooltips only works with <a> tags. Right now you’d have to use the Custom IDs setting in Super Tooltips to detect <area> tags instead, within the image map. But I could very easily get Super Tooltips updated to automatically detect and ‘tooltip’ map areas too. So it could work exactly like above, requiring no complicated configuration.

Plus you have the benefits of these two being search engine optimised, very user friendly and mobile responsive.

I guess it depends how intricate the map areas need to be, as to whether this could work or not in your instance. But small and intricate image maps tend to be a pretty poor experience on touch screens IMO.


(Bill Fleming) #8

Thank you

I will download the demo and try it out tomorrow

The new world map is going to take up site width page (1200) but only have 6 areas to touch or hover over…

Our current one is at https://www.agwm.com/ on the bottom of the web page. Former web developer did this map and they asked me to redo it in a bigger scale just like it but move it to its own page.


(Bill Fleming) #9

@willwood

I downloaded your demo model and started mapping (outlining) a country in preview then the image suddenly vanished after a few clicks so I never gotten a change to complete mapping. Is that because it a demo version causing the image to vanish?


(Bill Fleming) #10

@willwood

Look like demo is on a timer which never gave me enough time to complete marking an poly area around the map with odd shapes. Anyway, I use an online area generator and c/p the area into your stack. Seem to work this way.

But I have a question about the stack, can each area have it own fill color?


(Will Woodgate) #11

@TechBill Super Tooltips was updated a little earlier to add support for tooltips on image map areas.

Demo restrictions on ImageMapper have been revised. Please download the stack again to continue with your testing.

No you cannot give each area a unique colour. Currently the single border and colour fill is achieved with Javascript. See Stack Overflow for numerous discussions about the limitations of applying CSS to image maps. Ordinarily image map areas are invisible. A tutorial and trial can be found here.


(Bill Fleming) #12

I will grab the revised demo and try it again.

Thank you


(Bill Fleming) #13

@willwood
The revised demo allow me time to create an area and test it.

I do have one more question, is there a way to create two different poly area but have both link to the same area . If a cursor is hover one area and the second area will highlight with it etc.

When I tried this, there a line between the two area I wanted linked together. I wanted it to show as two area separately but link together to same hover highlight and anchor or tooltip. You can see on our current map we have some country that are under same region but not touching each other at the border.


(system) #14

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.