您好,我正在处理此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
非常感谢任何帮助...
谢谢