Jquery Maphilight Print Issue

Question

I am just having issue with jquery maphilight when printing everything works fine and in fact its a great plugin but when i go and try to take print the image wont appear in the area just the highlighted parts. any idea if someone is facing this issue and fixed that.

Thanks.

Answer 1

Maphilight changes the opacity of the image to 0 and sets it as a background image. It's normal behavior for for the browser to exclude this from printing. You can print background images if the client sets their browser to, but you cannot force it.

There is probably a better way to fix this.. but this is what I did. Edit the maphilight js file to include the image so it prints without needed to print background images.

Before:

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

After:

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

Answer 2

because maphilight sets the image opacity to 0, when you print the image doesn't show up (however the highlights do show). Workaround: make a thick, dark strokewidth and add the following style:

<style>
    @media print {
        .map {
        opacity: 0.7 !important;
    }
}
</style>