Raphaël.js canvas

by Akram kamal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="canvas"></div>
<ul>
    <li data-prov="BC">A</li>
    <li data-prov="ON">B</li>
    <li data-prov="NB">C</li>
</ul>

JavaScript

jQuery(document).ready(function () {

    var Draw = Raphael("canvas", 200, 200);
    var boxes = {
        BC: Draw.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({
            fill: "#000"
        }),

        ON: Draw.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({
            fill: "#000"
        }),
        NB: Draw.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({
            fill: "#000"
        })
    }

    jQuery('ul li').each(function () {
        var prov = boxes[$(this).data("prov")];
        console.log(prov)
        $(this).hover(function () {
            console.log(prov);
            prov.attr({
                fill: "#ccc"
            });
        }, function () {
            prov.attr({
                fill: "#000"
            });
        });
    });

});