Jam*_*kby 1 html javascript css jquery imagemap
我在图像地图上工作,作为导航的一部分创建的前一个开发.它将把英国地图切割成区域,以便导航到网站的某些部分.之前的dev使用了img贴图,但是图像贴图不能正确使用css,因为图像贴图是一种传统方法.
贝娄是代码
<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黑客可以选择这些以前的人民一道,
<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>
?
"图像地图是一种遗留方法" - 不真实.HTML 5规范完全支持HTML图像映射.
CSS根本不适用于图像映射.
试试ImageMapster,一个专为此目的而设计的jquery插件.
这是一个基本用法(与其他答案相同的问题 - 区域不匹配,我无法轻松找到英国的准确图像地图,也没有您的区域匹配的源图像).但是你明白了.
// basic implementation of hotspots with ImageMapster
$('#mapimage').mapster(
{
fillColor: 'ff0000'
});
如果您不想重新启动所有内容,可以执行以下操作:将悬停代码添加到每个区域,然后更改图像的来源.
$('#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');
}
);
这是这种方法的一个小提琴(在右下方翻滚东南)...图像不对应于当然的映射.
通过执行此操作,您将临时看到一个空白图像...直到图像加载.
有一些方法可以防止这种情况,例如使用spritesheet.如果有兴趣,我可以为你做一个例子.
这是一种简单的方法.还有其他选择.HTML5画布,如果您的网站是最新的浏览器.