html图像映射和悬停css答案

【问题标题】：html image maps and hover csshtml图像映射和悬停css
【发布时间】：2012-08-24 13:01:58
【问题描述】：

我正在处理以前的开发人员在导航过程中创建的图像地图。它将以英国地图为特色，分割成区域，以导航到网站的部分区域。之前的开发使用 img maps，但是 image maps 没有正确使用 css，因为 image maps 是一种遗留方法。

下面是代码

<style type="text/css">

#map a {
    cursor: hand;
}

</style>

<div id="mapimage"><img src="ukmap.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>

我们需要每个区域在悬停时改变颜色。最好使用绝对定位的 div 和 ul/li 重新编写它。或者是否可以在鼠标悬停时使用 jquery/javascript 更改 ukmap.gif？因为那时我可以有相同的图像，但不同区域的颜色被阻塞并更改图像以模仿 css：悬停，我不想破坏以前人们的工作，同时如果一个简单的 jquery hack 可以选择这些，我不想浪费时间重写它

<html>
<head>
<style type="text/css">

#map a {
    cursor: hand;
}

</style>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>


    <script>
$('#mapimage').mapster(
    { 
        fillColor: 'ff0000'
    });
</script>

<div>
    <img id="mapimage" src="images/map-complete.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486></div>

 <map id="map" name="map">


    <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" />

    <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" />

    <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" />

    <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" />

    <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" />

    <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" />

    <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" />

    <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" />

    <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />

</map>

【问题讨论】：

标签： javascript jquery html css imagemap

【解决方案1】：

“图像映射是一种传统方法”——不正确。 HTML 5 spec 完全支持 HTML 图像映射。

CSS 根本不适用于图像映射。

试试ImageMapster，一个专门为此目的设计的jquery插件。

这是一个基本用法（与其他答案相同的问题 - 区域不匹配，我无法轻松找到英国的准确图像地图，并且没有您的区域匹配的源图像）。但你明白了。

http://jsfiddle.net/VcGXL/

// basic implementation of hotspots with ImageMapster

$('#mapimage').mapster(
{ 
    fillColor: 'ff0000'
});

【讨论】：

我在实施你的方法时遇到了麻烦，我在上面提供了我的工作副本
#mapimage 是一个 id 选择器。在您的 HTML 中，这是在 div 上，而不是在图像上。我将其更改为示例中的图像。您需要定位图像。
在第二个示例中，#mapimage 位于图像而不是 div 上，我将您的代码放在一起
您是否引用了 imagemapster 脚本？你有任何错误吗？
是引用 imagemaster 脚本及其在他的 rgiht 目录等这里是文档的头部浏览器控制台中的错误显示 Uncaught SyntaxError: Unexpected token ILLEGAL > line 15

【解决方案2】：

如果您不想重新启动所有操作，您可以执行以下操作：将悬停代码添加到每个区域，并更改图像的来源。

$('#southeast').hover(
        function() {
            $('#mapimage img').attr('src', 'http://www.groupswelcome.co.uk/maps/uk_map.gif');
        },
        function() {
            $('#mapimage img').attr('src', 'http://www.alert24uk.com/ESW/Images/uk-map.gif');
        }
    );

这是这个方法的fiddle（右下角东南翻转）...图片当然不对应映射。

通过这样做，您将看到一个临时的空白图像...直到图像加载。

有一些方法可以防止这种情况发生，例如使用 spritesheet。如果有兴趣，我可以为你做一个例子。

这是一个简单的方法。还有其他选择。如果您的网站适用于最近的浏览器，则为 HTML5 画布。

【讨论】：

【解决方案3】：

事实上 area in none 的默认显示，因此您必须先将其样式设置为 display:block，因此使用此 CSS 规则来更改地图区域上的光标：

area{
    display:block;
    cursor:hand;
}

【讨论】：

【解决方案4】：

很抱歉在游戏后期才回答这个问题，但我有一个关于不规则（非矩形）形状的答案。我使用 SVG 解决了这个问题，以生成我想要附加事件的掩码。

这个想法是将事件附加到内联的 SVG，超级便宜，甚至用户友好，因为有很多程序可以生成 SVG。 SVG 可以有一层图像作为背景。

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

【讨论】：