Javascript 映射图像onClick事件加上maphilight悬停_Javascript_Html_Image_Onclick_Maphilight

Javascript 映射图像onClick事件加上maphilight悬停

javascript html image

Javascript 映射图像onClick事件加上maphilight悬停,javascript,html,image,onclick,maphilight,Javascript,Html,Image,Onclick,Maphilight,上面是一个带有4个映射区域的示例图像。以下是我想做的：如果鼠标悬停在任何映射区域上，则只有该区域应更改颜色如果在任何映射区域上单击鼠标，则一个全新的图像将替换图像1 到目前为止，我所尝试的：单击映射的_区域时更改图像 <img alt="main menu" class="map" id="myimage" src="image_1.png" border="0" usemap=&

上面是一个带有4个映射区域的示例图像。
以下是我想做的：
如果鼠标悬停在任何映射区域上，则只有该区域应更改颜色
如果在任何映射区域上单击鼠标，则一个全新的图像将替换图像1

到目前为止，我所尝试的：

单击映射的_区域时更改图像

 <img alt="main menu" class="map" id="myimage" src="image_1.png" border="0" usemap="#map1" />
 <map name="map1" id="map1">
     <area id="button1" alt="map1 button1" coords="4,49,148,138" shape="rect" onclick="document.getElementById('myimage').src='image_2.png'" />
 </map>

鼠标悬停时高亮显示映射的_区域

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.map').maphilight();
        });
    </script>


$（函数（）{
$（'.map'）.maphilight（）；
});

maphighlight和map_click_事件分别工作正常。但当我同时启用它们时，只有maphilight起作用。当maphilight处于活动状态时，如何为映射图像启用onclick事件

编辑：为了更清楚地显示图片和问题，您必须使用Jquery来实现这一点。以下网站为初学者提供了一个很好的教程：

这可能有助于您理解jquery的概念。复制粘贴并运行。你将不得不做出一些改变，但这只是你上面所问的方式

    <!DOCTYPE html>
    <html>
    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    $(document).ready(function () {

    $('.area').mouseenter(function () {
        $(this).addClass("change");
    });

    $('.area').mouseleave(function () {
        $(this).removeClass("change");
    });


    $('#a1').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a2').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a3').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    $('#a4').click(function () {
        $('.map').addClass("img_add");
        $('.map div').hide();
    });
    </script>

    <style>
    .map {
         height:40px;
         width:220px;
    }
    .area {
         height:30px;
         width:50px;
         background-color: yellow;
         float: left;
         margin: 2px;
    }
    .change {
        background-color: red;
    }
    .img_add {
        background-image:url('some_image.ext');
        background-repeat: no-repeat;
    background-position: center;
    }
    </style>

    </head>

    <body>

<div class="map">
    <div class="area" id="a1"></div>
    <div class="area" id="a2"></div>
    <div class="area" id="a3"></div>
    <div class="area" id="a4"></div>
</div>

    </body>
    </html>


$（文档）.ready（函数（）{
$（'.area'）.mouseenter（函数（）{
$（此）.addClass（“更改”）；
});
$（'.area'）.mouseleave（函数（）{
$（此）.removeClass（“更改”）；
});
$（'#a1'）。单击（函数（）{
$（'.map'）.addClass（“img_add”）；
$（'.map div'）.hide（）；
});
$（'#a2'）。单击（函数（）{
$（'.map'）.addClass（“img_add”）；
$（'.map div'）.hide（）；
});
$（'#a3'）。单击（函数（）{
$（'.map'）.addClass（“img_add”）；
$（'.map div'）.hide（）；
});
$（'#a4'）。单击（函数（）{
$（'.map'）.addClass（“img_add”）；
$（'.map div'）.hide（）；
});
.地图{
高度：40px；
宽度：220px；
}
.区域{
高度：30px；
宽度：50px；
背景颜色：黄色；
浮动：左；
保证金：2倍；
}
.改变{
背景色：红色；
}
.img_add{
背景图片：url（'some_image.ext'）；
背景重复：无重复；
背景位置：中心；
}

输出看起来像

附言：要显示有效图像，请为.img\u add提供样式中的有效链接（将“some\u image.ext”替换为正确的图像链接）

其中link是click的id或class元素，而#image是要更改源的id图像

没有人“必须”使用库。你可以提出建议，但这样做而不发布实际的解决方案不是一个答案-将其作为评论发布。我的坏人我应该将其作为评论，但现在我不能忽略你的请求。感谢你的回复，检查它。不幸的是，我没能在我的案例中完成这项工作，我的js知识非常有限。我编辑了y问题更清楚一点，你能再检查一遍吗？特定于你的代码已经在jsfiddle.net上更新。这里是链接：。我用更多的内容编写了它，以便为你简化。你可以使用if语句来减少代码，但我喜欢保持简单，因为我是第一阶段（链的开始）开发人员。

$("#link").click(function() {
    $("#image").attr("src", "images/medium/2.png");
});