Question

我正在构建一个需要用键盘访问的活动，但我不知道如何操作。活动在这里http://jsfiddle.net/shubhjagani/Gsdw2/，我已经按照我想要的方式工作了。但它只需要通过键盘访问。我正在使用图像地图。

HTML

    <img id="beatles" src="http://i.imgur.com/HG4C4f7.jpg" style="width:auto;height:auto;" usemap="#beatles-map">
<map name="beatles-map">
    <area shape="poly" data-name="paul,all" coords="250,9,249,126,371,98" href="#" />
    <area shape="poly" data-name="ringo,all" coords="325,242,173,242,250,125" href="#" />
    <area shape="poly" data-name="john,all" coords="326,242,372,96,248,125" href="#" />
    <area shape="poly" data-name="george,all" coords="128,98,250,9,249,125" href="#" />
    <area shape="poly" data-name="dog,all" coords="126,99,249,125,174,242" 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>

的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: ["Data - 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: ["Organizational Structures - 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: ["Interests - 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."],
        dog: ["Woof -Woof"],
        george: ["Relationships - 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: 4
    },
    all_opts = {
        fillColor: 'ffffff',
        fillOpacity: 0,
        stroke: false,
        strokeWidth: 0,
        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');
    }
});

Answer 1

这绝对不是一个完整的答案，但希望它指出你正确的方向（抱歉，我还没有足够的声誉发表评论！）。

$(document).ready(function(){
  $(document).keypress(function(data){
        inArea = true;
        $('#beatles-caption-header').text(captions[data.key][0]);
        $('#beatles-caption-text').text(captions[data.key][1]);
        $('#beatles-caption').show();
    });
});

我已经收到了关于按键显示的警报，但我无法确切地知道代码中需要什么来导致标题弹出。我在'onMouseover：'之后找到的这段代码并拼接到了jQuery代码中的按键功能触发器，但它并没有像我希望的那样完全正常工作。我能够让它显示如下所示的警报，所以我知道它至少在注册按键。

$(document).ready(function(){
  $(document).keypress(function(){
          alert("test");
    });
});

使用键盘悬停

1 个答案: