Question

我使用jquery创建了一个accept复选框（就像在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，也许使用其中一个HTML库，我不知道。问题我无法在搜索中找到关键字以找到最佳方法。

非常感谢您的建议。

Answer 1

通常使用图像精灵和css来完成。我不打算进入图像精灵是什么，例如我们有一个分成两半，左半部分是未接受的图像，右半部分是接受的图像。如果您愿意，可以有更多状态，如果需要，可以垂直组织精灵。

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");
});

使用HTML5创建一个接受复选框

1 个答案: