Question

我有一张带有地图的图片和一些区域。我想在鼠标悬停时突出显示它们（使用此lib http://davidlynch.org/projects/maphilight/docs/）。这适用于这个js代码：

    if(cfg.id != deviceId) {
        console.warn('The device MAC address does not match the ID in the configuration file.');
    }
    //------------- This is where I'm facing  a problem --------

    var clientId = ['d', cfg.org, cfg.type, cfg.id].join(':');

    var client = mqtt.connect("mqtts://" + cfg.org + 
      '.messaging.internetofthings.ibmcloud.com:8883', 
      {
        "clientId" : clientId,
        "keepalive" : 30,
        "username" : "use-token-auth",
        "password" : cfg['auth-token']
      });
    client.on('connect', function() {
      console.log('MQTT client connected to IBM IoT Cloud.');
    });
    client.on('error', function(err) {
      console.log('client error' + err);
      process.exit(1);
    });
    client.on('close', function() {
      console.log('client closed');
      process.exit(1);
    });
    monitorSensorTag(client);
  });
});

function monitorSensorTag(client) {
  console.log('Make sure the Sensor Tag is on!');

和这个HTML代码：

<script type="text/javascript">
    $(function(){$('.map').maphilight();});
</script>

现在我想更改整个图像（使用fadeout / fadein）并在使用

单击某个区域时删除地图

<div id="content">
    <img src="./media/torten.png" width="800" height="600" alt="" usemap="#tortendiagramm" class="map" id="bild">
</div>

        <map name="tortendiagramm">
            <area shape="poly" coords="410,280,410,55,500,75,590,145,630,240,630,330">
            <area shape="poly" coords="410,280,630,330,618,360">
            <area shape="poly" coords="410,280,618,360,580,425,510,480,400,504,305,477">
            <area shape="poly" coords="410,280,305,477,260,445">
            <area shape="poly" coords="410,280,260,445,220,400,200,350">
            <area shape="poly" coords="410,280,200,350,190,319">
            <area shape="poly" coords="410,280,190,319,190,243,210,178,234,144,282,96,335,70,410,55">
        </map>

使用此js-code：

            <area shape="poly" coords="410,280,410,55,500,75,590,145,630,240,630,330" onclick="changeImage('./media/1.png')">

弹出警告框，但图像不会改变。如果我删除了地图高亮显示代码，那么它会用fadein / out更改图像。

有关如何使用高亮显示更改图像的任何想法吗？

Maphilight并更改图片的src

0 个答案: