Question

http://oi43.tinypic.com/2eyvtaq.jpg

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

到目前为止我尝试过：

单击mapped_region

时更改图像

 <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>

在鼠标悬停时突出显示mapped_region

    <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>

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

编辑：图片和问题更清晰

Answer 1

您必须使用Jquery来实现此目的。以下网站为初学者提供了一个很好的教程： codeacademy

这可能有助于您掌握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>

输出看起来像this。

P.S：要显示有效图像，请为.img_add提供样式的有效链接（将“some_image.ext”替换为正确的图像链接）

Answer 2

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

其中link是用于click的id或class元素，＃image是用于更改源的id图像

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

2 个答案: