0

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',
});
Lyria
  • 1
  • 1
  • 1
    Welcome to **StackOverflow**! Next time please make sure to put your `code` in a snippet if you can, so we can run it. Also, by improving your formatting you are making the life of the ones who answer easier as they can understand better. Thanks! – Costa Jul 28 '21 at 09:33

1 Answers1

0

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

<img id="myimage" class="map" src="http://cdn.iphoneincanada.ca/wp-content/uploads/2013/05/unnamed.png" usemap="#mark">
    <map name="mark">
        <area id="nao" shape="rect" coords="10,10,50,50" href="#">
    </map>

jQuery

$('#myimage').mapster({
    staticState: true,
    fillColor: "d42e16",
    stroke: true,
    strokeColor: "ff0000",
    strokeOpacity: 1.0,
    strokeWidth: 2,
    render_highlight:  {
        fillOpacity: 0.5,
        fillColor: "FFeedd",
        stroke: true,
        strokeOpacity: 1.0,
        strokeColor: "FF0000",
        strokeWidth: 2
    }
});
Nagy Szabolcs
  • 227
  • 1
  • 9
  • Ok so i tried my code with a little change in jsfiddle and it works , BUT it still doesnt work in my html file, i don't know why. The codes are exact copy paste of each other.Here is the jsfiddle : https://jsfiddle.net/49mpz6ku/ and here is the screenshot of my html : https://ibb.co/whhywS9 – Lyria Jul 28 '21 at 10:04
  • Did you include jquery in head? Is there any error in console? – Nagy Szabolcs Jul 28 '21 at 11:25