i'm new to coding.can't make this work for some reason.any help appreciated
I want to highlight/select a human anatomic image on different body parts.I can add to mapster code,this is a short one to test if its working and it does not.
edit: messed around with it for a while, latest code is here: jsfiddle.net/49mpz6ku the exact code works on jsfiddle but not on my html. Here is a screenshot from my browser : screenshot
edit2: there is no problem in linking html with the js file , everything else works apart from imagemapster
edit3:Ok i figured it out after 2 hours of work. My mistake was putting scripts linking with libraries and my js file at the head section above the elements that it works on.When i took the scripts to the end of html's body it works now. ( Or you can use $(document).ready(function(){Your code here}); to execute the code after page loads.This also works, hope it will be helpful to someone in the future)
html :
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script
language="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/imagemapster/1.5.4/jquery.imagemapster.min.js">
</script>
<script
src="exp.js">
</script>
</head>
<body>
<img src="unnamed.jpg" usemap="#image-map" id="mappic">
<map name="image-map" >
<area target="" alt="Head" title="Head" href="" coords="119,61,38" shape="circle">
<area target="" alt="Neck" title="Neck" href="" coords="143,100,97,122" shape="rect">
<area target="" alt="Shoulder" title="Shoulder" href="" coords="147,163,196,117" shape="rect">
</map>
</body>
JS:
$('#mappic').mapster({
singleSelect: true,
fill : true,
fillOpacity : 0.6,
fillColor: 'ffffff',
});
What's the problem anyway? Is there any error in console? What are you trying to achieve? Is this all your code? If not, please insert more code details and try to make a runnable code example (like jsfiddle)
Here is a working code which may can help you!
HTML
jQuery