How to resize image with map area coords...? via maphilight

[rishiphp]

Hi,

Thanks for this awesome plugin, i've used this for mobile app, everthing works charm..!

but i cant control the image size as well canvas size, so how can i resize (or) rescale the original image and cavas for mobile devices..

help me out..

[pythonsmile]

hello!
I'm having the same issue right now (but not for mobile, just need to resize the image and have correct area highlighted)
have you solved this issues?
thanks

[harrijon]

Hi,

I believe this solves the resizing issue. In researching this issue, "this.width" and "this.height" inexplicably changed during the running of mapHilight. So, the following gets the initial image dimensions, then uses them later on. ..screwy, i know.. but, it fixes Chrome and Safari.

1. use mapHilight in conjuction with rwdImagesMaps. ..specifically, this version: GitHub - stowball / jquery.rwdImageMaps-hilight.js
2. add the following lines to mapHilight.js.

add the following lines:

    var imgW = img.width();
    var imgH = img.height();

above this line:

options = $.extend({}, opts, $.metadata ? img.metadata() : false, img.data('maphilight'));

then, also change:

    wrap = $('<div></div>').css({
                display: 'block',
                background: 'url("' + this.src + '")',
                position: 'relative',
                padding: 0,
                width: this.width,
                height: this.height
            });

to:

   wrap = $('<div></div>').css({
                display: 'block',
                background: 'url("' + this.src + '")',
                'background-size': 'cover',
                position: 'relative',
                padding: 0,
                width: imgW,
                height: imgH
            });

[mvpfi]

This workaround works when loading but not when resizing. Useful fix nevertheless, thx.

[jmelnik]

So it's 2023, and these 2 plugins are still the best way to do this type of responsive interactive highlighted image as far as I know, lol.

Kudos to the creators of these plugins for creating something so useful.

Still can't figure out how to get this working on image resize though.

If you manually click the refresh button everything resizes and highlights correctly, but it requires a manual browser refresh.

I'm happy to take a shot at it, but i'm not sure what else to look at. Any suggestions would be greatly appreciated.

[levente-nagy]

@jmelnik You're right. I've been searching for months already for a better solution, but there's nothing out there.

I'm facing the same issue and tried everything already, but no luck in making the highlights responsive on resize.

A pretty stupid workaround that I've found is to simulate a reload/refresh on window resize.

This will reload the maphilight entirely and it will keep everything responsive, no matter the area size, but the only issue is that if you are using highlights with alwaysOn, these will not be remembered after reload/refresh.

I think this can be fixed also by saving some data in the localStorage, but not sure if it's a great idea.

[jmelnik]

@levente-nagy I had to eventually give up on this method. I tried the page refresh thing too, but my users really complained about the page refreshes, lol.

I ended up going with straight up SVGs and some CSS. I save the Visio diagrams as SVG then manually add the necessary CSS to the text/css style element at the top of the file. It has the added benefit of not requiring a bunch of js just to highlight some shapes. There's not a single script element in the file.

Turns out the trick i needed to get the correct elements to highlight was a fairly new css pseudo class for :has().

This is what worked for my diagram:

  /* custom styles */
    svg {
      width: 100%;
      height: auto;
    }
    a ellipse:hover {
      fill: red !important;
    }
    a ellipse:has(+ text:hover) {
      fill: red !important;
    }
    a rect:hover {
      fill: red !important;
    }
    a rect:has(+ text:hover) {
      fill: red !important;
    }
     a path:hover {
      fill: red !important;
    }
    a path:has(+ text:hover) {
      fill: red !important;
    }
    div:has(div.CanvasSection) {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    /*****************/

Hope that helps.