'Mapster plugin isnt showing tooltip or outline coordinates
This code uses mapster plug in, and when I run it you can hover over the cordinates on the picture but no tool bar pops up with what everything is. It is also not highlighted so you can see it. I am trying to make it look like this page.https://www.charlestoncounty.org/tax-pp-bill.php and how you hover over certain sections and it is highlighted and the tool bars pop up. Any help would be greatly appreciatd.
enter code here
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
></script>
<script type="text/javascript" src="redist/jquery.3.5.1.min.js"></script>
<script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
<script type="text/javascript" src="../dist/jquery.imagemapster.zepto.js"></script>
<!--Added script to make mapster work-->
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.generic-tooltip').on('mouseover', function () {
var tooltip_text = $(this).data('tooltip-text'),
tooltip_jquery = $(this).data('tooltip-jquery'),
tooltip_content = $(this).data('tooltip-content'),
tooltip_func = $(this).data('tooltip-func'),
tooltip =
tooltip_text ||
(tooltip_jquery && $('<div>').text(tooltip_jquery)) ||
(tooltip_content && {
content: tooltip_content,
fadeDuration: 1000,
closeEvents: ['generic-click']
}) ||
(tooltip_func &&
function () {
return tooltip_func;
});
$('img').mapster('tooltip', this, "The text is: " + $(this).text());
});
$('#image-map').mapster({
showToolTip: true,
toolTipContainer: '<div style="border: 2px solid black; background: #EEEEEE; width:100%; max-width:320px; padding:4px; margin: 4px; -moz-box-shadow: 3px 3px 5px #535353; ' +
'-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; ' +
'border-radius: 6px 6px 6px 6px;opacity: 0.9;"><div id="close"></div ></div>',
toolTipFade: true,
toolTipClose: ['tooltip-click'],
isSelectable: false,
noHrefIsMask: false,
onStateChange: state_change,
fillColor: 'cccccc',
fillOpacity: 0.3,
mapKey: "group",
strokeWidth: 2,
stroke: true,
strokeColor: 'F88017',
render_select: {
fillColor: 'adadad',
fillOpacity: 0.5
),
areas: [
{
{
key: 'BillNo',
toolTip: '<b>Bill No.</b><br>Number used to identify individual tax bills.'
}
]
});
});
$('#mapped').mapster({
mapKey: 'img'
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="en-us" http-equiv="Content-Language">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>Form Example</title>
<img src="form.PNG" usemap="#image-map" id="img" >
<map name="image-map">
<area shape="RECT" coords="100,61,296,90" href="#" group="BillNo">
</map>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="en-us" http-equiv="Content-Language">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>Form Example</title>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
></script>
<script type="text/javascript" src="redist/jquery.3.5.1.min.js"></script>
<script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
<script type="text/javascript" src="../dist/jquery.imagemapster.zepto.js"></script>
<!--Added script to make mapster work-->
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.generic-tooltip').on('mouseover', function () {
var tooltip_text = $(this).data('tooltip-text'),
tooltip_jquery = $(this).data('tooltip-jquery'),
tooltip_content = $(this).data('tooltip-content'),
tooltip_func = $(this).data('tooltip-func'),
tooltip =
tooltip_text ||
(tooltip_jquery && $('<div>').text(tooltip_jquery)) ||
(tooltip_content && {
content: tooltip_content,
fadeDuration: 1000,
closeEvents: ['generic-click']
}) ||
(tooltip_func &&
function () {
return tooltip_func;
});
$('img').mapster('tooltip', this, "The text is: " + $(this).text());
});
$('#image-map').mapster({
showToolTip: true,
toolTipContainer: '<div style="border: 2px solid black; background: #EEEEEE;
width:100%; max-width:320px; padding:4px; margin: 4px; -moz-box-shadow: 3px 3px 5px
#535353; ' +
'-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353;
-moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; ' +
'border-radius: 6px 6px 6px 6px;opacity: 0.9;"><div id="close"></div >
</div>',
toolTipFade: true,
toolTipClose: ['tooltip-click'],
isSelectable: false,
noHrefIsMask: false,
onStateChange: state_change,
fillColor: 'cccccc',
fillOpacity: 0.3,
mapKey: "group",
strokeWidth: 2,
stroke: true,
strokeColor: 'F88017',
render_select: {
fillColor: 'adadad',
fillOpacity: 0.5
),
areas: [
{
{
key: 'BillNo',
toolTip: '<b>Bill No.</b><br>Number used to identify individual tax
bills.'
}
]
});
});
$('#mapped').mapster({
mapKey: 'img'
});
</map>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|