Я пытался объединить imagemapster с xsl, безрезультатно
Это просто внутри тега body, только соответствующие части, в <head>
Я правильно связал JQuery из imagemapster, но я не вижу результатов (я использую Firefox)
<body>
<xsl:for-each select="/TEI/text/body/div/pb">
<div id="page{@n}">
<img id="pageimg{@n}" src="{@facs}" usemap="#pagemap{@n}"/>
<map name="pagemap{@n}">
<xsl:for-each select="/TEI/facsimile/surface/zone">
<area shape="rect" coords="{@ulx},{@uly},{@lrx},{@lry}" data-name="{@xml:id}" href="#"/>
</xsl:for-each>
</map>
</div>
<div id="panel_div" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="panel_header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="beatles-caption-text"></div>
</div>
<script type="text/javascript">
var inArea,
map = $('#pageimg{@n}'),
captions = {
<xsl:for-each select="/TEI/text/body/div/panel">
<xsl:value-of select="@facs"/>: ["<xsl:copy-of select="."/>"],
</xsl:for-each>
},
single_opts = {
},
all_opts = {
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onMouseover: function (data) {
inArea = true;
$('#panel_header').text(captions[data.key][0]);
$('#panel_text').text(captions[data.key][1]);
$('#panel_div').show();
},
onMouseout: function (data) {
inArea = false;
$('#panel_div').hide();
}
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
</script>
</xsl:for-each>
</body>
Возможно просто упускать из виду, или я что-то пропустил, но, пожалуйста, помогите.