1

我使用 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，也许使用我不知道的 HTML 库之一。问题是我找不到要放入搜索中的关键字以找到最佳方法。

非常感谢您的建议。

4

1 回答 1

1

This is usually done with an image sprite and css. I'm not going to go into what an image sprite is other than for example we have one split in half, the left half is the unaccepted image, the right half is the accepted image. You could have more states if you wish, and the sprite can be organized vertically instead if you want.

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

and then with a little js toggle the the accepted class on click.

$(".btn-accept").click(function(){
    $(this).toggleClass("btn-accept-accepted");
});
于 2013-05-17T15:16:58.460 回答