clarketm / image-map Goto Github PK
View Code? Open in Web Editor NEWResponsive, dynamic image maps.
Home Page: https://blog.travismclarke.com/project/imagemap/
License: Apache License 2.0
Responsive, dynamic image maps.
Home Page: https://blog.travismclarke.com/project/imagemap/
License: Apache License 2.0
Is there a way to highlight the areas when we hover? Thanks
Thanks for the plugin! It's been very helpful. One issue I found is that it does not seem to resize properly for IE11.
When I install only image-map
module with yarn with:
yarn add image-map
then when importing imageMap it crashes because jQuery is not defined.
There are problems here:
Can you make jQuery optional?
I couldn't find any options to perform a yarn add image-map --with-peer-dependencies` since it doesn't exist.
I will Try this. but it not right when I responsive from desk top to mobile.
Please! help me! this is my code!
<style>
img {
display: block;
width: 100%;
}
</style>
<img src="https://minhlong.com/uploads/product/ce5d6f8e142e3a762921c8fe134781f4.jpg" usemap="#image-map">
> <map name="image-map">
> <area target="_blank" alt="" title="" href="https://minhlong.com/vi/san-pham/chi-tiet/2841/trau-thinh-vuong-25cm-mau-tim-trang-tri-vang-24k.html" coords="0,0,0" shape="circle" data-coords="180,320,34">
> <area target="_blank" alt="" title="" href="https://minhlong.com/vi/san-pham/chi-tiet/2795/trau-thinh-vuong-25cm-dat-vang.html" coords="0,0,0" shape="circle" data-coords="387,331,36">
> <area target="" alt="" title="" href="" coords="0" shape="0" data-coords="0">
> </map>
Hi there,
I thought I should post it here in case it's useful to anyone.
I noticed when making a whole lot areas this script will slow right down. I fixed it by changing the lines around line 52 to:
document.querySelectorAll('map[name="' + map + '"] area').forEach(function () {
var coordsS = this.dataset[c] = this.dataset[c] || this.getAttribute(c),
coordsA = coordsS.split(','),
coordsPercent = Array.apply(null, Array(coordsA.length));
coordsPercent.forEach(function (val, i) {
coordsPercent[i] = i % 2 === 0 ? Number(((coordsA[i] / w) * 100) * wPercent) : Number(((coordsA[i] / h) * 100) * hPercent);
});
this.setAttribute(c, coordsPercent.toString());
});
I'm not completely sure what effect this has such as if it's compatible with older browsers or whatever but it seems to work and doesn't slow my browser down like before.
The live demo link given in the docs is not working.
https://www.travismclarke.com/imagemap
Hey, it's very nice project, but it think your SSL certificate expired in demo. You should check it out.
Have a good day
module "/Users/my-website/node_modules/image-map/dist/image-map"
Could not find a declaration file for module 'image-map'. '/Users/my-website/node_modules/image-map/dist/image-map.js' implicitly has an 'any' type.
Try npm i --save-dev @types/image-map
if it exists or add a new declaration (.d.ts) file containing declare module 'image-map';
ts(7016)
Loving the concept and implements OK (coordinates changing with window size as expected). Unfortunately it's not honouring the href tag and providing a link. No errors in the console. Stumped.
Any ideas much appreciated.
my website URL
https://nepal-clinics.kraftech.in/
I am using your library, on local it's absolutely fine, but on prod it's just not working, not responsive.
Can you please fix it ?
hello
this package work on firefox very nice but not working on google chrome
Hi, upon using this in ionic. How can I set the mapping to be responsive too? Since different screen size affect the position of the mapping too.
I tried to use library in Ionic, but I'm receiving error
SCRIPT5007: Unable to get property 'fn' of undefined or null reference
image-map.js (73,5)
Any ideas what could cause that?
Thanks for this great plugin! I'm able to easily use it to display pre-made image maps.
I'd like to allow users to generate image maps themselves, by clicking on an image (much like image-map.net). Naturally, that creates the same issues with responsive images. Any idea how to expand this plugin to allow image map generation as well?
One issue I found is that it does not work in any resolution on Safari.
I want to use this in one of my projects, a very useful package indeed. I need to know if we can we use this in React JS, if yes how? Or is there a react version of this package?
I already tried using this in React, it works,but sometimes it fails on browser back button, I cant exactly figure out where to place this code for react components.
Hello, i am working on a Vue project, where i use a image map. I follow the command to install and when i do a
import ImageMap from 'image-map'
, i receive this message :
Could not find a declaration file for module 'image-map'. 'C:/Users/gerau/OneDrive/Bureau/Stage_LMD_DUT_Informatique/FRONTEND/front_end/node_modules/image-map/dist/image-map.js' implicitly has an 'any' type.
I did test to install @types/image-map and it couldn't be found:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fimage-map - Not found
npm ERR! 404 '@types/image-map@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
Someone know how I could resolve my problem ?
I want to use image-map plugin in Nuxt.js app.
So I make sample app
https://github.com/dokechin/nuxt-imagemap-example
In the case, image-map page visit second time from nuxt-link.
It not going successfully. (http://localhost:3000/)
In the case image-map page visited at first.
It going successfully.(http://localhost:3000/index2)
How to execute former case?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.