Search code examples
jquerycsshtmlbuttonimagemap

Create an accept check-box using HTML5

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.

Solution

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