A few questions - Githubissues

LucyTurtle commented 6 years ago

So I have a few questions about my page and ImageMapster. I have it working, however there are a few weird kinks/ideas that I am hoping y'all can help me with.

Here is the code for my page, www.pinkdropwellness.com, and see below for the questions :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Pink Drop Wellness Homepage">
    <meta name="keywords" content="Pink,Drop,Wellness,Fertility,Awareness,Essential,Oils,Blog">
    <meta name="author" content="Lucy Bowe">
    <link rel="stylesheet" href="stylesheet.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/scripts/jquery.imagemapster.js"></script>
  </head>

  <body>
    <img id="logo" src="/images/PinkDrop.png" alt="Pink Drop Wellness">
    <img id="tree" src="/images/Tree.png" alt="Tree" usemap="#links">

    <map name="links">
       <area
         shape="poly"
         name="blog"
         coords="445,105,432,123,418,132,402,132,386,136,385,156,417,168,437,185,475,208,510,197,531,167,527,141,496,106"
         href="/blog"
         alt="Blog"
        />
        <area
          shape="poly"
          name="fertilityawareness"
          coords="138,450,149,443,167,441,186,441,199,447,208,458,228,466,243,477,256,477,270,483,302,480,325,475,349,472,371,457,383,443,391,427,373,398,345,373,310,347,268,334,218,348,194,377,141,436,169"
          href="/fertilityawareness"
          alt="Fertility Awareness"
         />
         <area
           shape="poly"
           name="essentialoils"
           coords="787,490,753,498,719,523,671,553,634,566,593,541,545,487,540,432,570,407,606,403,653,420"
           href="/essentialoils"
           alt="Essential Oils"
          />
    </map>

    <script>
      var resizeTime = 100;
      var resizeDelay = 100;

      $('#tree').mapster({
        mapKey: 'name',
        clickNavigate: true,
        isSelectable: false,
        areas: [
          {
            key: "blog",
            fillColor: "5a7cc7"
          },
          {
            key: "fertilityawareness",
            fillColor: "785fc2"
          },
          {
            key: "essentialoils",
            fillColor: "638a69"
          },
        ]
      });

      // Resize the map to fit within the boundaries provided
      function resize(maxWidth,maxHeight) {
        var image =  $('img'),
          imgWidth = image.width(),
          imgHeight = image.height(),
          newWidth=0,
          newHeight=0;

        if (imgWidth/maxWidth>imgHeight/maxHeight) {
          newWidth = maxWidth;
        } else {
          newHeight = maxHeight;
        }
        image.mapster('resize',newWidth,newHeight,resizeTime);
      }

      // Track window resizing events, but only actually call the map resize when the
      // window isn't being resized any more
      function onWindowResize() {
        var curWidth = $(window).width(),
          curHeight = $(window).height(),
          checking=false;

        if (checking) {
          return;
        }
        checking = true;
        window.setTimeout(function() {
          var newWidth = $(window).width(),
            newHeight = $(window).height();
          if (newWidth === curWidth && newHeight === curHeight) {
            resize(newWidth,newHeight); 
          }
          checking=false;
        },resizeDelay );
      }

      $(window).bind('resize',onWindowResize);
    </script>
  </body>
</html>

Questions!

Question 1: The href area and the highlighted area on the page are not overlapping. As you can see if you visit the site, the linked area seems to be just a little to the right of where it should be. Do you know what may be causing this?

Question 2: I would like for the color inside of the highlighted area to fade towards the edges so you cannot see the boxy edges. Is there any way you can think of to do this? I tried using images but they didn't fit into the area correctly. If this is the right idea how would I go about making sure they fit into the area.

Question 3: I had the tree image located at the top of the page, and centered in the middle of the screen (using css). As you can tell it is no longer doing that once I added the script. If I delete the script out it goes back to where it was! It seems like all CSS is being totally ignored. Do you know how to fix that? I would like my tree to be at the top of the page and centered horizontally.

techfg commented 3 years ago

Hello @LucyTurtle -

Thank you for your questions, apologies for the relayed reply!

Unfortunately, the URL you specified is no longer available but I'll try to do my best to answer your questions where I can:

Question 1: The likely reason for this is that "resize" logic that you have on the page. In the resize method, you are using the selector img and then calling width() and height(). The way jQuery works, when you call width or height is that it will return the width/height of the first element retrieved via the selector. Given this, what's likely occurring since you have two images on the page is that the width/height are coming from the #logo image and then when you call imagemapster resize method, it is applying that width/height to both images. The solution here is to obtain the width/height of each individual image if you want to resize both images or just obtain #logo width/height if you only want to resize #tree

Question 2: Not sure what you mean by "boxy edges" but its possible this can be accomplished via CSS. This question is likely best suited for Stack Overflow. See our Support page for more details on the best places to find general support of IM/javascript/etc.

Question 3: It's very possible this is the same issue as Question #1 but without a repro, its difficult to say. IM should have no effect on positioning and since you mention the problem only occurs when you include the "script" (assuming you mean the resize portion of the script not the entire script), this is likely the cause.

Please let us know if this helps!

techfg commented 3 years ago

Hello @LucyTurtle -

It has been over 30 days since we last heard from you so we are going to close this issue.

If you need further assistance, please choose one of the following options:

For general IM questions, how to's, usage, etc., please use one of the options described on our Support page.
If you believe you have identified a bug in IM, please update this issue following our Bug Reports guidelines.
If you would like to request a new feature for IM, please open a new issue following our Feature Requests guidelines.

jamietre / ImageMapster

A few questions #289