0
我使用mapster製作了9個區域的映像。現在單擊某個區域會在圖像上方顯示一些文字。我想顯示來自多個文件夾的圖像,取決於所選的區域。當在圖像地圖上選擇區域'kamer1'時,我希望文件夾'/ kamer1'中的所有圖像顯示在圖像地圖上方。從javascript映像更改img src文件夾
這是我第一次使用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]);
}
});
而不是$('#details')。html(xref [e.key]);你需要一個返回圖像標籤的服務器進程並執行$('#details')。load(xref [e.key]); – mplungjan
感謝@mplungjan的回覆。我之前並沒有真正指定,但我不需要動態加載文件夾中的所有圖像,只需要幾個預定義的圖像。假設我有一個文件夾/ kamer1,其中包含kamer1_1.jpg直到kamer1_5.jpg。根據這個命名規則,是否有簡單的方法來加載這些圖像?其他文件夾將包含類似的文件,名爲kamer2_1.jpg等。 – Laureus