1

I have created an accept checkbox (like in stackoverflow.com), using jquery. I used maphilight.js plugin.

In details, I created an image map, I defined my area, and applied the plugin so that this area is highlighted on mouseover, changed color on click.

    <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 side:

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

I am sure I can do it with another approach better that using maphighlight.js, maybe using one of the HTMLs libraries, that I dont know. The problem I cannot find the keywords to put in my searches to find the best approach.

Your suggestions are highly appreciated.

4

1 に答える 1

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");
});
于 2013-05-17T15:16:58.460 に答える