如何使用html5中的图像映射更改图像文本的颜色

Question

嗨我有一张图片，特别是如果我滚过鼠标然后是图片中的文字，其颜色应该在悬停时更改。我已经应用了代码，通过它我可以使用图像映射，如果我在该区域滚动鼠标，它会显示蓝色补丁。但这并不顺利。请帮我解决一下如何更改图像中的文字颜色。以及我正在使用的正确方法。提前谢谢。

我使用的代码是： HTML：

<map id="map1" name="whatever" style="display:none">
        <area id="1" href="#" shape="rect" coords="10,10,200,150" style="border: black 1px solid"/>
    </map>

    <div id="main">
        <div id="rect" style=" position:absolute; background-color:#039; display:none" ></div>
        <img id="tnt"  src="images/image1.png" usemap="#whatever" />
    </div>

JS：

$(window).load(function () {
        var abc = $('#map1');
        var x, y, id_ = "", arr, k = "";
        var ttt = $('#rect').position();
        var tre = $('#tnt').position();
        abc.hover(function (e) {
            id_ = '#' + e.target.id;
            arr = ($(id_).attr('coords')).split(',');
            //alert("hello")
            arr[0] = arr[0] * 1;
            arr[1] = arr[1] * 1;
            $('#rect').css('left', tre.left + arr[0]);
            $('#rect').css('top', tre.top + arr[1]);
            $('#rect').css('width', 185);
            $('#rect').css('height', 160);
            $('#rect').toggle();

            abc.on('click', function (event) {
                $('#rect' + id_.split('#')[1]).css('left', tre.left + arr[0]);
                $('#rect' + id_.split('#')[1]).css('top', tre.top + arr[1]);
                $('#rect' + id_.split('#')[1]).toggle();
            });
        });
});

CSS：

#map a {
    cursor: hand;
}

$('#mapimage').mapster(
    { 
        fillColor: '090'
    });


img:hover {
  border: 5px solid #090;
}

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#03C;
}

#area:hover{
     background:#03C;
}

和我正在使用的测试图像是