Question

我正在关注这个jsfiddle：http://jsfiddle.net/nYkAG/396/它运作得非常好。

以下代码：

<img id="beatles" src="http://www.outsharked.com/imagemapster/examples/images/beatles_basic.jpg" 
style="width:400px;height:240px;" usemap="#beatles-map">
  <map name="beatles-map">
    <area shape="rect" data-name="paul,all" coords="36,46,121,131" href="#" />
    <area shape="rect" data-name="ringo,all" coords="113,76,198,161" href="#" />
    <area shape="rect" data-name="john,all" coords="192,50,277,135" href="#" />
    <area shape="rect" data-name="george,all" coords="262,60,347,145" href="#" />
  </map>

<div id="beatles-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
 <div id="beatles-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
 <div id="beatles-caption-text"></div>
</div>

但是，为什么这个index1.html（测试）没有这个？

http://nina-naustdal.com/index1.html

感谢您的协助

Answer 1

查看您的页面，我看不到jsFiddle附带的JavaScript。

我看到一个名为'imagemapster'的插件，但它似乎与你的小提琴示例中的代码无关。

进一步调查确认您没有在小提琴中的JS窗口中包含相关的JavaScript。

您需要添加此脚本：

// javascript
// Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border
// 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border
// 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks
// onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or
// remove the captions, and also set a flag to let the other code know if we're currently in an area.
var inArea, map = $('#beatles'),
    captions = {
        paul: ["Paul McCartney - Bass Guitar and Vocals",
                                                                                            "Paul McCartney's song, Yesterday, recently voted the most popular song "
                                                                                              + "of the century by a BBC poll, was initially composed without lyrics. "
                                                                                              + "Paul used the working title 'scrambled eggs' before coming up with the final words."],
        ringo: ["Ringo Starr - Drums",
                                                                                          "Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, "
                                                                                            + "when she wouldn't come out and play with Mia and the Beatles at a religious retreat "
                                                                                            + "in India."],
        john: ["John Lennon - Guitar and Vocals",
                                                                                          "In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool "
                                                                                            + "contest principally because they called in posing as different people and voted "
                                                                                            + "for themselves numerous times."],
        george: ["George Harrison - Lead Guitar and Vocals",
                                                                                         "The Beatles' last public concert was held in San Francisco's Candlestick "
                                                                                            + "Park on August 29, 1966."]
    },
    single_opts = {
        fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeColor: 'ff0000',
        strokeWidth: 2
    },
    all_opts = {
        fillColor: 'ffffff',
        fillOpacity: 0.6,
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'ffffff'
    },
    initial_opts = {
        mapKey: 'data-name',
        isSelectable: false,
        onMouseover: function(data) {
            inArea = true;
            $('#beatles-caption-header').text(captions[data.key][0]);
            $('#beatles-caption-text').text(captions[data.key][1]);
            $('#beatles-caption').show();
        },
        onMouseout: function(data) {
            inArea = false;
            $('#beatles-caption').hide();
        }
    };
opts = $.extend({}, all_opts, initial_opts, single_opts);


// Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the
// original demo. Check whether an area has been activated with "inArea" - IE<9 fires "onmouseover"
// again for the image when entering an area, so all areas would stay highlighted when entering
// a specific area in those browsers otherwise. It makes no difference for other browsers.
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');
    }
});

ImageMapper由于JQUERY或HTML而无法正常工作

1 个答案: