格式化Imagemapster选择

时间:2018-06-25 13:49:28

标签: javascript imagemapster

您好,我正在处理此imagemapster节目选择代码。人们将点击地图区域进行选择。

    <div id="veg_demo" style="width:800px; margin: auto;">
        <div style="clear:both;">
        <img id="fvip" width="100%" src="linkto/images/fvip_map.jpg" usemap="#fvip" >
    </div>
        <div style="clear:both; height:8px;"></div>
        <div id="selections" style="clear:both;"></div>
        <a id="show_selected" style="clear:both;">Show Selected Beds:</a>
        <div id="selected" style="clear:both;"></div>
    </div>

<map id="fvip_map" name="fvip">
    <area shape="poly" name="915" coords="756,100,756,135,772,135,772,100" href="#" />
    <area shape="poly" name="914" coords="739,100,739,135,755,135,755,100" href="#" />
    <area shape="poly" name="913" coords="717,101,717,136,733,136,733,101" href="#" />
</map>

$(document).ready(function () {
   var image = $('#fvip');
   var xref = {
       <?php if ( $the_query->have_posts() ) {
            while ( $the_query->have_posts() ) {
                $the_query->the_post();
                echo "'$post->ID':\"<h3>Bed number $post->ID</h3>\",";
                    }
                    wp_reset_postdata();
                } else {
                } ?>
   };
   var defaultDipTooltip = 'some text';

   image.mapster(
   {
        render_highlight: {
            fillColor: '2aff00',
            stroke: true,
        },
        render_select: {
            fillColor: '1433d3',
            stroke: true,
        },          
        fillOpacity: 0.8,
        fillColor: "14b842",
        strokeColor: "FFFFFF",
        strokeOpacity: 0.8,
        strokeWidth: 4,
        stroke: true,
        scaleMap: false,
        isSelectable: true,
        singleSelect: false,
        showToolTip: true,
        mapKey: 'name',
        listKey: 'name',
        onClick: function (e) {

            var newToolTip = defaultDipTooltip;
            $('#selections').html(xref[e.key]);
            if (e.key==='806') {
                newToolTip = "FVIP";
            }
        },
        showToolTip: true,
        toolTipClose: ["tooltip-click", "area-click", "area-mouseout"],
        areas: [ <?php foreach($posts as $post) { echo "{ toolTip: \"This bed is not available for this date.\", key : \"$post->ID\", isSelectable: false },"; } ?> ]
    });

    function showSelect(){
        $("#show_selected").bind("click", function (e) {
            e.preventDefault();
            $('#selected').text($("#fvip").mapster("get"));
        });
    }
    showSelect();

  });
</script>

但是我不知道如何循环选择,例如:

<div>913</div>
<div>914</div>
<div>915</div> ... and so on

我想为每个值设置样式和格式。现在,#selected的输出仅为913914915

非常感谢任何帮助...

谢谢

0 个答案:

没有答案