1

在此处输入图像描述

上面是具有 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 事件？

编辑：图片和问题更清楚

4

2 回答 2

2

您将不得不使用 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>

输出看起来像这样。

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

于 2014-01-03T11:26:01.010 回答
0 
$("#link").click(function() {
    $("#image").attr("src", "images/medium/2.png");
});

其中 link 是用于单击的 id 或类元素，而 #image 是用于更改源的 id 图像

于 2014-01-03T11:28:36.897 回答