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
Have you looked at the Points stack by Joe Workman?!
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)
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.
That might be something I am looking for . I wonder if it can be set up in RW
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âŚ
1 Like
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.
4 Likes
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.
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?
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?
@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.
I will grab the revised demo and try it again.
Thank you
@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.
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.