保存输入表单后ImageMap颜色更改

Question

我想创建一个地图，其中包含根据输入表单上的复选框选择分配颜色的部分。 我读过的大部分内容都描述了可点击的图片映射，它们会在点击或悬停时更改颜色。 这对于我的地图而言不是必需的。 目的是将所选部分保存在输入表单中，然后在无法单击或悬停时更改的显示屏幕上显示彩色区域。 我想以此作为疏散地图，让用户知道要疏散哪些区域。

我研究了ImageMapster，它可能很有用，但是我还没有弄清楚如何将其合并。

以下是一些我想结合使用的示例。

jsfiddle.net/jamietre/hD6bM/

jsfiddle.net/BH79/xqaFX/

同样，我真正需要的是带有复选框选项的基本表单，然后在保存时用颜色更新地图选择。 谢谢你的帮助！

Answer 1

如果您需要使用图像映射，并且可以使用imagemapster（这实际上非常好），那么可以执行以下操作：

工作示例： http : //jsfiddle.net/hD6bM/130/

HTML

1. 为您的每个复选框提供一个唯一的标识符，以便您知道要突出显示的地图区域（在此示例中，值为“华盛顿”的ID）。
2. 为每个区域赋予相同的标识符（我只是使用了imagemapster示例随附的默认“完整”属性）。

jQuery的

1. 在地图上启用imagemapster，并禁用默认的突出显示和区域选择。

    $('img').mapster({ isSelectable: false, highlight: false }); 

2. 为单击的地图区域创建样式（仅作为示例，请参见imagemapster文档以了解不同的可能性）。

    clickedOptions = { fill: true, fillColor: '00ff00', stroke: true, strokeColor: '000000', strokeWidth: 1 }; 

3. 单击复选框时切换新样式。

    $('.checkbox').toggle(function () { $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions); // Clicked fill }, function () { $("[full='" + $(this).attr('id') + "']").mapster('set', false); // Back to no fill }); 

这只是一个示例……可能有一种更好的方法来定位您的元素，但是这完全取决于其余代码的工作方式。

---

编辑

只是注意到我误读了您的问题，以上内容是针对复选框的onclick。 如果您希望仅在提交表单后更新地图，则可以将上面的代码修改为如下形式：

// On submit highlight selected areas.
$( "form" ).submit(function( event ) {
    $('.checkbox').each(function(i, obj) {
        if ($(this).is(':checked')) {
            $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions);
        } else {
            $("[full='" + $(this).attr('id') + "']").mapster('set', false);
        }
    });
  event.preventDefault();
});

这是另一个工作示例： http : //jsfiddle.net/hD6bM/132/