jquery - 使用 HTML5 创建接受复选框

Question

我使用 jquery 创建了一个接受复选框(就像在 stackoverflow.com 中一样)。我用了maphilight.js插件。

详细来说，我创建了一个图像映射，定义了我的区域，并应用了插件，以便该区域在鼠标悬停时突出显示，在单击时更改颜色。

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script type="text/javascript" src="../jquery.maphilight.js"></script>

    <script>$(function() {

        $('#star,#starlink2').click(function(e) {
            e.preventDefault();
            var data = $('#star').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#star').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
    });</script>

HTML 端:

<img src="image.png" width="300" height="301" class="map" usemap="#features">
<map name="features">

<area id="star" shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star" class="group" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}'>

</map>

我确信我可以用另一种比使用 maphighlight.js 更好的方法来做到这一点，也许使用一个我不知道的 HTMLs 库。问题是我找不到要放入搜索中的关键字以找到最佳方法。

非常感谢您的建议。

Answer 1

这通常是通过图像 sprite 和 CSS 完成的。我不打算讨论图像 Sprite 是什么，例如我们将一个图像分成两半，左半部分是未接受的图像，右半部分是已接受的图像。如果你愿意，你可以有更多的状态，如果你愿意， Sprite 可以垂直组织。

a.btn-accept {
    width: 50px;
    height: 50px;
    display: block;
    background: #ffffff url("my-image-sprite.png") no-repeat 0px 0px;
}
a.btn-accept:hover, .btn-accept-accepted {
    background-position: -50px 0px;
}

然后用一点 js 在点击时切换接受的类。

$(".btn-accept").click(function(){
    $(this).toggleClass("btn-accept-accepted");
});