0

我使用 mapster 制作了一个包含 9 个区域的图像地图。现在单击一个区域会导致在图像地图上方显示一些文本。我想显示来自多个文件夹的图像，具体取决于所选区域。在图像映射上选择区域“kamer1”时，我希望文件夹“/kamer1”中的所有图像都显示在图像映射上方。

这是我第一次使用 JavaScript，所以对于外面的人来说这是一个简单的问题。

我制作了一个 JSFIDDLE：http: //jsfiddle.net/BTnV2/7/

HTML：

<div style="clear: both; width: 900px; height: 450px;" id="details"></div>
<img id="layout" src="http://i61.tinypic.com/2yl4spc.png" usemap="#usa" style="width:900px;height:800px;">
<map id="usa_image_map" name="usa">
    <area href="#" room="kamer1" full="B&B" shape="rect" coords="50,764,143,635">
    <area href="#" room="kamer2" full="B&B" shape="rect" coords="146,764,238,669">
    <area href="#" room="kamer3" full="B&B" shape="rect" coords="241,764,326,669">
    <area href="#" room="hal" full="B&B" shape="rect" coords="146,666,326,635">
    <area href="#" room="badkamer" full="B&B" shape="rect" coords="234,632,326,574">
    <area href="#" room="keuken" full="B&B" shape="poly" coords="50,632,229,632,229,570,303,570,303,508,150,508,150,540,50,540">
    <area href="#" room="boven" full="B&B" shape="rect" coords="50,540,150,508">
    <area href="#" room="kamer4" full="B&B" shape="rect" coords="50,505,217,392">
    <area href="#" room="kamer5" full="B&B" shape="rect" coords="220,505,392,392">
</map>

JS：

var xref = {
    kamer1: "<b>FOTO's van kamer 1</b>",
    kamer2: "<b>FOTO's van kamer 2</b>",
    kamer3: "<b>FOTO's van kamer 3</b>",
    hal: "<b>FOTO's van hal</b>",
    badkamer: "<b>FOTO's van badkamer</b>",
    keuken: "<b>FOTO's van keuken</b>",
    boven: "<b>FOTO's van boven kamer</b>",
    kamer4: "<b>FOTO's van kamer 4</b>",
    kamer5: "<b>FOTO's van kamer 5</b>"
};

var image = $('#layout');

image.mapster({
    fillOpacity: 0.5,
    fillColor: "c20000",
    stroke: true,
    strokeColor: "c20000",
    strokeOpacity: 0.8,
    strokeWidth: 3,
    singleSelect: true,
    mapKey: 'room',
    listKey: 'room',
    clickNavigate: true,
    fade: false,
    fadeDuration: 50,
    showToolTip: true,
    toolTipContainer: '<div style="clear: both; align: center;"></div>',
    areas: [{
        key: "kamer1",
        toolTip: "Groepsaccommodatie <br> kamer 1"
    }, {
        key: "kamer2",
        toolTip: "Groepsaccommodatie <br> kamer 2"
    }, {
        key: "kamer3",
        toolTip: "Groepsaccommodatie <br> kamer 3"
    }, {
        key: "hal",
        toolTip: "Groepsaccommodatie <br> hal"
    }, {
        key: "badkamer",
        toolTip: "Groepsaccommodatie <br> badkamer"
    }, {
        key: "keuken",
        toolTip: "Keuken en eetkamer"
    }, {
        key: "boven",
        toolTip: "Recreatieruimte"
    }, {
        key: "kamer4",
        toolTip: "Bed & Breakfast <br> kamer 1"
    }, {
        key: "kamer5",
        toolTip: "Bed & Breakfast <br> kamer 2"
    }],

    onClick: function (e) {
        $('#details').html(xref[e.key]);
    }
});
4

1 回答 1

0 
var xref = {
    kamer1: {
      "desc":"FOTO's van kamer 1",
      "images":["stoel.jpg","tafel.jpg"]
    }, 
    kamer2: {
      "desc":"FOTO's van kamer 2",
      "images":["image1.jpg","image2.jpg"]
    } 
};
// note the lack of comma on the last room

onClick: function (e) {
  e.preventDefault();
  var room = xref[e.key];
  var html = '<b>'+room.desc+'</b><br/>';
  for (var i=0;i<room.images.length;i++)
  html += '<img src="'+images[i]+'" alt="image #'+(i+1)+'" />';
  $('#details').html(html);
}

如果您不知道图像的编号或名称，可以尝试以下操作：

var xref = {
  kamer1: "FOTO's van kamer 1",
  kamer2: "FOTO's van kamer 2",
  kamer3: "FOTO's van kamer 3"
}
onClick: function (e) {
  e.preventDefault();
  var html = '<b>'+xref[e.key]+'</b><br/>';
  var imagePath = e.key+"/"+e.key+"_";
  for (var i=1;i<=5;i++) {
    html += '<img src="'+imagePath+i+'" alt="image #'+(i+1)+'"'+
    ' onerror="this.parentNode.removeChild(this)" />';
  }
  $('#details').html(html);
}
于 2014-02-01T12:39:58.377 回答