1

嗨，我有一个图像，如果我将鼠标悬停在图像上的特定部分，那么图像中的文本，它的颜色应该在悬停时改变。我已经应用了可以使用图像映射的代码，如果我在该区域滚动鼠标，它会显示蓝色补丁。但这并不顺利。请帮助我如何更改图像中的文本颜色。这也是我使用的正确方法。提前致谢。

我使用的代码是：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;
}

我正在使用的仅用于测试的图像是

在此处输入图像描述

4

0 回答 0