javascript imagemap에서 img src 폴더 변경

Question

mapster를 사용하여 9 개의 영역으로 된 이미지 맵을 만들었습니다. 영역을 클릭하면 이미지 맵 위에 텍스트가 표시됩니다. 선택한 영역에 따라 여러 폴더의 이미지를 표시하고 싶습니다. imagemap에서 'kamer1'영역을 선택하면 '/ kamer1'폴더의 모든 이미지를 imagemap 위에 표시하고 싶습니다.

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]); 
    } 
}); 

Answer 1

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); 
}