Question

我想在单张图片中创建一些链接。我知道我们可以使用区域map.i使用this链接获取帮助

请查看链接。

但现在我的要求是将所选状态显示为活动状态。与此同时，我们还希望在我们应该激活的时间选择多个状态。

使用控制键组合的

选择状态位于

之下

click = function(e) {
                e.preventDefault();

                // Get clicked area element.
                var i = e.srcElement || e.target;

                /**
                * Turn on/off alwaysOn option (boolean, false by default).
                * Indicates whether to always show the hilighted areas.
                */
                i.alwaysOn = !i.alwaysOn;


                if (window.event) {
                    key = window.event.keyCode;     //IE
                    if (window.event.ctrlKey)
                        isCtrl = true;
                    else
                        isCtrl = false;
                }
                else {
                    key = e.which;     //firefox
                    if (e.ctrlKey)
                        isCtrl = true;
                    else
                        isCtrl = false;
                }


                // Apply changes.
                if (isCtrl == true) {
                    i.alwaysOn = true;
                    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
                }
                else {
                    i.alwaysOn = false;
                    $(img).hasClass('maphilighted').each(function() {

                        $(this).data('maphilight', i).trigger('alwaysOn.maphilight');
                      /* here i want remove all selected (highlighted) state */
                    });
                }

            };

Answer 1

以下代码允许您在地图上选择多个状态。

$('map').click(function(e) {
    e.preventDefault();

    // Get clicked area element.
    // Works in IE, FF, Chrome.
    var i = e.srcElement || e.target;

    /**
      * Turn on/off alwaysOn option (boolean, false by default).
      * Indicates whether to always show the hilighted areas.
      */
    i.alwaysOn = !i.alwaysOn;

    // Apply changes.
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    // Explicitly adding a class to the element.
    $(i).addClass('maphilighted');
});

Read about how to toggle highlighting

取消突出显示的更新。

你不能在each之后调用函数hasClass，因为后者返回布尔表达式，不是对象列表。

以下是取消突出显示的工作代码：

if (!isCtrl) {
    i.alwaysOn = false;
    $('area').each(function() {
        if ($(this).hasClass('maphilighted')) {
            $(this).data('maphilight', i).trigger('alwaysOn.maphilight');
        }
    }
}

更新2。

if (isCtrl) {
    i.alwaysOn = true;
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    $(i).addClass('maphilighted');
} else {
    el = $(i.parentNode).children().each(function() {
        this.alwaysOn = false;
        if ($(this).hasClass('maphilighted')) {
            $(this).data('maphilight', this).trigger('alwaysOn.maphilight');
            $(this).removeClass('maphilighted');
        }
    });

    i.alwaysOn = true;
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    $(i).addClass('maphilighted');
}

Answer 2

以下是具有活动状态的图像映射示例，这可以帮助您完成您想要做的事情

http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/

在单个图像中创建链接

2 个答案: