锚标签和图像映射答案

【问题标题】：anchor tags and image maps锚标签和图像映射
【发布时间】：2010-01-07 06:29:42
【问题描述】：

如何将锚标记与图像映射相关联？

假设，我将鼠标悬停在一个锚标记上，它应该选择图像上的映射区域。

类似http://myffi.biz/。这是在闪存中，但是可以使用图像映射来完成吗？您将鼠标悬停在链接上，它应该选择图像上的映射区域。

这可能吗？我希望我清楚

【问题讨论】：

Jonathan Sampson 不是已经在您的上一个问题中回答了这个问题吗？ stackoverflow.com/questions/2007431/…
是的，他做到了，但我无法将锚标签与图像映射相关联。他提供的链接帮助我完成了地图，但我也想要另一种方式，你将鼠标悬停在锚标签上，它应该在地图上选择。问题不同！

标签： javascript jquery html css imagemap

【解决方案1】：

是的，它可以在没有 Flash 的情况下完成，但您根本不需要图像映射。只需在地图上正确的图像中添加一个悬停事件fadeIn，这用jQuery很容易做到。这样的事情可能会奏效：

<ul class="region">
    <li><a href="#" id="europe">Europe</a></li>
    <li><a href="#" id="asia">Asia</a></li>
    <li><a href="#" id="africa">Africa</a></li>
    <li><a href="#" id="australia">Australia</a></li>
</ul>
<div id="region-map">
    <div id="region-overlay"></div>
</div>

在 CSS 中，您将 region-map 定义为具有未选择区域的背景，而 region-overlay 选择了不同的区域。

#region-map, #region-overlay {
    width: 640px;
    height: 320px;
}

#region-map {
    background: url(map-base.jpg) 0 0 no-repeat;
}

#region-overlay.europe {
    background: url(map-europe.jpg) 0 0 no-repeat;
}

#region-overlay.asia {
    background: url(map-asia.jpg) 0 0 no-repeat;
}

#region-overlay.africa {
    background: url(map-africa.jpg) 0 0 no-repeat;
}

#region-overlay.australia {
    background: url(map-australia.jpg) 0 0 no-repeat;
}

以及所需的 jQuery 代码：

$(function() {
    $('ul.region a').hover(function() {
        // Get the current region
        var region = $(this).attr('id');
        // Hide the current overlay, change it's map and change it back.
        $('#region-overlay').fadeOut(200, function() {
            $(this).attr('class', region).fadeIn(200);
        });
    }, function() {
        // Hide the overlay
        $('#region-overlay').fadeOut(200);
    });
});

这并不完美，但应该可以帮助您入门。

可以在以下位置找到一个工作示例：

http://www.ulmanen.fi/stuff/hovermap/

【讨论】：