search

jamietre / ImageMapster

jQuery plugin for enhancing HTML Image maps
http://jamietre.github.io/ImageMapster/
MIT License
818 stars 332 forks source link

[✨] Allow areas with no href or href empty without user feedback on the status bar #423

Open dec opened 2 hours ago

dec commented 2 hours ago

Is your feature request related to a problem and/or adding functionality? Please describe

Hello there,

First of all, thanks very much for your work on this project, it's really useful. I have a "problem" related with the "href" attribute of the area elements. I am not sure if this is solved in some way, I try various possible ways, but without lucky.

The problem is the feedback that the browsers place in the status bar when hover the mouse on an area with the "href" attribute. My intention to use ImageMapster is to prepare a kind of "test" with the image map.

The idea is that the user will be asked with a question like: "Please, select the correct items in the image". The problem with this scenario is that, when an user hover the mouse over an area, the browser show the URL (even if "href" is empty) in the status bar, so, in some way, the user will know where the items are...

I try by removing the "href" attribute, or by use the "nohref" attribute. I play a bit with this and the "mask" options of ImageMapster, but, I can't get the desired result. Basically I want that a "nohref" or "href" empty area continue to work "as a normal area", basically react when press on it, but, avoiding the feedback / hint in the status bar that the browsers shown.

Can anyone help me on this?

I hope you understand what I am trying to explain: please, if you have any questions, don't hesitate to post it here and I will try to reply it as quickly as possible. Thanks very much in advance for any help!

Describe the solution you'd like

The solution that I'd like to have is that areas with empty "href" attributes, or with some kind of attribute / value, works like other areas: the whole idea is to avoid the feedback / hint that the browsers place in the status bar, which in some way "tell the user" where an area is located, something totally wrong for our specific project.

Describe alternatives you've considered

I try a possible workaround, by placing a link (HTML A tag) for the image map itself, so, we can see the URL in the status bar always, and this may help with the desired result: the user don't know if there is an area over the mouse cursor, because the status bar URL is always shown, not only when reach an area.

However, this workaround have some caveats, for example, we can certainly catch the image map link, however, the user can use the middle button of the mouse, for example, in order to open the link in a new browser tab, and, this will ends in a non desired behavior.

Additional context

No additional context.

dec commented 2 hours ago

Hello to all,

Just to add some information. Other thing I do is to handle the "auxclick" event of the "fake link" which I use for the entire image map, and, apparently, I can handle the mouse middle button. However, this do not work in all browsers.

techfg commented 1 minute ago

Hello @dec -

Thanks for the feature request. Although I'm not 100% clear on what you're trying to achieve, I think I understand enough of it to get the basic idea. The main thing I do not understand, sorry, is that the browser shows the URL in the status bar, however if you have a href="#" value, it should show the URL of the current page so I'm not clear on why the current page URL "gives the user the answer" for your specific project. If you can provide more details on this that would be ideal.

Regarding the feature, ImageMapster is currently written to treat anything with nohref or # in the href as a "no-op", meaning its ignored. Masks with these values can be treated a little different but I don't think masks is the solution for your situation if I'm understanding it properly. Changing how ImageMapster works as it relates to this could be a pretty significant change unlikely to be done unfortunately since ImageMapster really isn't actively developed anymore.

With that said, here are a couple of ideas if I'm understanding your request:

  1. Use javascript:void(0) or any other value for the href (e.g., href="javascript:void(0)" or href="https://somefakeurl.com". If you need "click" behavior, you can use the various options in ImageMapster to control what happens when a user clicks on an area (e.g., clickNavigate, navigateMode, onClick, etc.). Here is an example.
  2. If the above doesn't work, you can try removing the href values AFTER imagemapster has completed its initialization. By removing the href, the browser won't show anything. Once you do this, some of the ImageMapster functionality will still work (e.g., clicks will still work), however other things won't (e.g., mouseover events). For those that you need that don't work, you can use the ImageMapster API to trigger them yourself. Here is an example that strips the href in the onConfigured event and then handles mouseover to highlight areas.

Hopefully one of these will help your situation. If not, please provide more details and specifics on what you are looking for and ideally, a jsFiddle sample with step-by-step information on what the user experience should be at each step of the process.

Hope this helps!