保存輸入表單后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/