贡献一个小程序，用于辅助页面设计的，喜欢的来顶下

yiyeqinghuasoon

浏览: 680811 次

最近访客更多访客>>

morelily

lobin

_肖丹

920988216

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1079)

社区版块

存档分类

2012-01 ( 20)
2011-12 ( 66)
2011-11 ( 21)
更多存档...

正常情况下，我们的页面中链接是这样的

这样，我们点击“虎胆游侠”就会弹出一个新窗口，然后打开我的主页……

然而，这样的a标签只能用一个矩形把文字区域框住，十分单调。

在一些特殊的情况下，我们需要不规则的链接，比如艺术化的导航菜单，不规则按钮，地图……等等。

给a标签内嵌套img并不能完全满足，这些需求。

一个可行的做法是用img做map，相信很多人都会，usemap=“#map”就可以使用area做特殊形状的链接了，

包括rect矩形，circle圆形，polygon（DW自动完成是poly）。

rect还有什么用？它的意义是用一张图片的不同区域做不同的链接……

最强大的是polygon，其实熟悉WindowsAPI的程序员，VB,VC或Delphi等都知道有几个多边形绘图函数，这里我就不说了。

其模型基本一致，只要给出一系列的坐标即可。我这个程序就是方便大家计算出这一些列的坐标。

VB版源码及编译好的程序我会稍后上传到我的资源。

现在展示一个小demo吧！

下面的代码。保存为map.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广西地图</title>
</head>

<body>
<img src="guangxi.png" alt="广西地图" usemap="#mlog" style="border:none;" />
<map name="mlog">
	<area shape="polygon", href="#1" onmouseover="fnShow(this)" title="百色市" coords="13,71,15,80,18,83,19,79,25,81,31,82,33,91,41,93,44,90,47,92,51,92,56,90,61,96,61,106,57,111,53,109,43,117,44,123,49,123,53,127,60,125,66,129,72,127,76,129,79,124,79,119,86,114,91,114,95,112,96,115,100,117,103,115,109,111,106,107,105,104,109,102,104,98,92,93,82,90,81,80,77,73,79,72,75,69,79,68,77,59,71,59,67,63,62,63,62,68,57,73,53,71,50,72,47,69,43,69,38,65,36,65,33,63,26,71,19,74" />
	<area shape="polygon", href="#2" onmouseover="fnShow(this)" title="崇左市" coords="76,129,79,124,79,119,86,114,91,115,94,113,96,115,95,120,100,122,100,128,106,125,110,127,114,128,117,133,115,137,117,141,112,148,106,149,105,154,103,155,103,162,101,166,98,167,95,163,91,163,88,160,87,157,78,156,77,148,74,145,74,139,78,136,80,131"  />
	<area shape="polygon", href="#3" onmouseover="fnShow(this)" title="防城港" coords="101,165,103,162,103,155,105,153,105,149,106,148,112,148,116,142,119,145,123,146,121,150,121,154,124,156,128,156,131,158,132,162,132,165,129,168,118,169,115,168,111,165,108,164,104,168" />
	<area shape="polygon", href="#4" onmouseover="fnShow(this)" title="南宁市" style="border:#fe2012 dashed 1px;" coords="116,143,117,140,115,137,117,133,115,132,115,128,113,127,109,127,106,123,105,126,100,127,100,122,96,121,96,116,101,117,103,115,105,115,109,111,109,109,107,108,110,106,112,106,114,103,114,99,116,97,121,97,123,91,125,91,126,98,128,100,130,99,133,97,136,98,136,103,141,110,147,112,153,119,153,122,157,123,161,130,157,133,153,132,150,136,144,136,137,136,131,140,131,144,129,147,127,146,123,147" />
	<area shape="polygon", href="#5" onmouseover="fnShow(this)" title="钦州市" coords="134,163,130,157,124,157,121,155,121,148,126,146,129,147,131,145,131,140,137,137,151,136,152,133,161,130,164,134,168,133,169,143,163,141,160,145,161,154,153,155,150,157,146,157,141,161,141,165" />
	<area shape="polygon", href="#6" onmouseover="fnShow(this)" title="河池市" coords="106,108,113,104,115,97,122,97,123,91,126,91,129,89,129,86,134,79,138,81,143,75,138,74,140,71,140,66,145,65,145,62,140,62,143,58,141,55,133,57,132,54,125,47,120,44,116,47,115,53,106,57,100,52,97,56,95,50,92,48,90,43,86,43,83,47,83,52,79,56,75,56,72,59,78,59,79,68,76,68,79,72,77,74,79,76,81,82,82,89,90,92,109,101,105,104" />
	<area shape="polygon", href="#7" onmouseover="fnShow(this)" title="北海市" coords="141,166,141,161,146,157,151,157,153,155,165,154,165,161,168,162,169,169,163,171,153,170,149,172,147,170,150,166" />
	<area shape="polygon", href="#8" onmouseover="fnShow(this)" title="玉林市" coords="168,163,172,162,173,156,186,153,184,151,184,145,187,145,192,145,196,141,193,136,199,130,198,128,195,122,195,115,187,115,185,118,180,118,180,124,178,124,168,118,167,124,165,124,167,128,162,131,164,134,168,133,169,135,168,143,165,141,161,144,161,154,165,155,165,161" />
	<area shape="polygon", href="#9" onmouseover="fnShow(this)" title="贵港市" coords="162,131,167,128,165,125,167,123,168,118,179,123,180,118,185,118,188,113,189,100,187,100,188,93,183,92,181,87,179,92,176,92,170,98,168,104,164,105,158,110,150,110,148,112,151,117,153,118,154,123,157,123,159,129" />
	<area shape="polygon", href="#10" onmouseover="fnShow(this)" title="来宾市" coords="134,79,138,82,141,85,146,86,150,87,151,91,155,92,157,87,168,79,170,82,176,77,181,78,183,82,179,89,180,92,176,92,170,99,168,104,165,105,158,110,150,110,148,112,142,110,136,103,136,98,134,97,129,100,126,98,126,91,129,89,129,85" />
	<area shape="polygon", href="#11" onmouseover="fnShow(this)" title="柳州市" coords="176,76,170,81,168,79,156,87,156,92,152,92,150,87,141,86,139,80,143,75,138,75,137,72,139,71,140,66,145,66,145,62,140,62,140,59,143,58,141,55,138,55,134,57,128,51,128,45,131,40,135,42,142,43,141,38,138,37,142,34,144,36,148,36,148,33,152,27,157,26,158,31,162,36,160,52,158,54,158,63,164,63,170,67,172,67,174,70,173,73" />
	<area shape="polygon", href="#12" onmouseover="fnShow(this)" title="桂林市" coords="198,77,188,76,178,78,173,74,174,69,164,62,159,63,159,53,162,37,161,32,162,26,165,20,169,20,169,26,173,24,174,27,177,26,178,23,182,18,182,15,187,15,189,17,192,16,193,13,203,16,201,26,203,28,208,27,209,29,205,33,204,44,200,47,199,50,196,52,198,59,201,59,202,62,198,66,199,75" />
	<area shape="polygon", href="#13" onmouseover="fnShow(this)" title="贺州市" coords="187,76,194,76,198,77,200,71,198,66,203,61,201,54,205,51,210,52,212,64,215,66,219,61,226,61,224,66,229,74,224,80,226,85,223,91,219,91,215,80,212,83,211,87,209,90,205,87,198,96,195,89,190,86,189,80" />
	<area shape="polygon", href="#14" onmouseover="fnShow(this)" title="梧州市" coords="181,77,187,77,190,82,190,87,194,89,198,96,205,88,208,89,211,87,211,81,215,80,216,84,219,89,219,95,212,105,211,114,214,117,211,122,205,127,205,130,198,131,195,122,195,116,188,115,189,101,187,98,188,93,183,92,181,86,183,81" />
</map>
<div>指向位置：<span id="iMap"></span>， Powered By <a href="http://blog.csdn.net/prsniper" target="_blank">游侠技术</a>。</div>
<script language="javascript">
	function fnShow(o)
	{	//document.title = o.title;
		var e = document.getElementById("iMap");
		if(e) e.innerHTML = o.title;
		o.focus();
	}
</script> 
</body>
</html>

用到下面的图片，保存为 guangxi.gif