Javascript html 图像映射和悬停 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12109924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html image maps and hover css
提问by James Kirkby
Im working on a image map a previous dev created as part of a navigation. It will feature the UK map cut up into regions to navigate to them parts of the site. The previous dev used img maps, but image maps dont use css correctly as image maps are a legacy method.
我正在处理以前的开发人员作为导航的一部分创建的图像地图。它将以英国地图为特色，分为多个区域，以导航到网站的各个部分。以前的开发人员使用了 img 映射，但是图像映射没有正确使用 css，因为图像映射是一种遗留方法。
Bellow is the code
波纹管是代码
<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>
We need each of the areas to change colour on hover. would it be best to re write this using div and ul/li with absolute positioning. Or is it possible to change the ukmap.gif with jquery/javascript on mouse over? as then i could have the same image with different areas blocked colour and change the image to mimic a css:hover, i dont want to undermine previous peoples work while at same time not wasting time rewriting it if a simple jquery hack can select these
我们需要每个区域在悬停时改变颜色。最好用绝对定位的 div 和 ul/li 重写这个。或者是否可以在鼠标悬停时使用 jquery/javascript 更改 ukmap.gif？因为那时我可以使用不同区域阻止颜色的相同图像并更改图像以模仿 css:hover，如果一个简单的 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>
?
?
?
回答by Jamie Treworgy
"image maps are a legacy method" -- untrue. HTML image maps are fully supported by the HTML 5 spec.
“图像映射是一种遗留方法”——不真实。HTML 5 规范完全支持 HTML 图像映射。
CSS simply doesn't apply to imagemaps.
CSS 根本不适用于图像映射。
Try ImageMapster, a jquery plugin designed exactly for this purpose.
试试ImageMapster，一个专门为此目的而设计的 jquery 插件。
Here's a basic usage (same problem as the other answer - the areas don't match right, I couldn't easily find an accurate imagemap of the UK and don't have your source image that your areas match). But you get the idea.
这是一个基本用法（与其他答案相同的问题 - 区域不匹配，我无法轻松找到英国的准确图像地图，并且没有与您的区域匹配的源图像）。但是你明白了。
// basic implementation of hotspots with ImageMapster
$('#mapimage').mapster(
{
fillColor: 'ff0000'
});
回答by VVV
If you don't want to restart everything you could do the following: Add the hover code to each area, and change the source of the image.
如果您不想重新启动所有内容，您可以执行以下操作：将悬停代码添加到每个区域，并更改图像的来源。
$('#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');
}
);
Here's a fiddleof this method (rollover southeast at the bottom right)... Images do not correspond to the mapping of course.
这是这种方法的一个小提琴（右下角向东南方向滚动）......当然，图像与映射不对应。
By doing this, you will see a blank image temporary... until the image loads.
通过这样做，您将看到一个临时的空白图像......直到图像加载。
There are ways to prevent this, like using a spritesheet instead. If interested, I can work up an example for you.
有一些方法可以防止这种情况发生，例如使用 spritesheet 代替。如果有兴趣，我可以为您制作一个示例。
This is an easy way. There are other options. HTML5 canvas if your website is for recent browsers.
这是一个简单的方法。还有其他选择。如果您的网站适用于最近的浏览器，则使用 HTML5 画布。
回答by George SEDRA
In fact the default display for area in none so you have to style it to display:blockfirst, so put this CSS rule to change the cursor over the maps areas:
实际上，区域的默认显示为 none，因此您必须先将其样式设置为display:block，因此请使用此 CSS 规则来更改地图区域上的光标：
area{
display:block;
cursor:hand;
}
回答by Juan Carlos Moreno
Sorry to jump on this question late in the game but I have an answer for irregular (non-rectangular) shapes. I solved it using SVGs to generate masks of where I want to have the event attached.
很抱歉在游戏后期跳到这个问题上，但我有一个不规则（非矩形）形状的答案。我使用 SVG 解决了它来生成我想要附加事件的位置的掩码。
The idea is to attach events to inlined SVGs, super cheap and even user friendly because there are plenty of programs for generating SVGs. The SVG can have a layer of the image as a background.
这个想法是将事件附加到内联 SVG，超级便宜，甚至用户友好，因为有很多程序可以生成 SVG。SVG 可以有一层图像作为背景。
http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/
http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/
