📄 map.html
字号:
<html>
<head>
<title>map - HTML元素参考-HTML Elements Reference-网页教程与代码的中文站点-布啦布啦-blabla.cn</title>
<meta name="author" content="www.blabla.cn">
<meta name="keywords" content="map,HTML参考,HTML教程, HTML代码,HTML元素,HTML elements,网页教程和代码的中文网站,网页制作,源代码,示例,布啦布拉,blabla.cn,examples">
<meta name="description" content="-网页教程与代码的中文站点-网页制作-布啦布啦-blabla.cn">
<meta name="generator" content="blabla buildsite v2.0 - C:\CodeBank\BLABLA\blablasource\webtutorials\150_html_ref\100_html_elements\315_map.txt">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../styles/bla01.css" type="text/css">
<script type="text/javascript">
function WsFvt() {
window.external.addFavorite(
"../default.htm",
"布啦布啦网页教程与代码[www.blabla.cn]");
}
function WsHome() {
event.srcElement.style.behavior = "url(#default#homepage)";
event.srcElement.setHomePage("../default.htm");
}
function WsActOn() {
event.srcElement.className = "wsacton";
}
function WsAct() {
event.srcElement.className = "wsact";
}
</script>
</head>
<body class=wsbody>
<div class=wsheader>
<table cellpadding=0 cellspacing=0 class=wslogoarea>
<td class=ws_a1><img src="../images/logo/blabla_logo01.gif" class=blablalogo03></td>
<td class=ws_a2>
<div>
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsFvt()">加入收藏</font> |
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsHome()">设为首页</font>|
<a href="mailto:webmaster@blabla.cn">联系我们</a>
</div>
<div style = "height:20px;"></div>
<div>
<a href="../html_tutorials/index.html">HTML教程</a> |
<a href="../html_tutorials/100_html_examples.html">HTML示例代码</a> |
<a href="../css_tutorials/index.html">CSS教程</a> |
<a href="../css_tutorials/100_CSS_examples.html">CSS示例代码</a> |
<a href="../js_tutorials/index.html">Javascript教程</a> |
<a href="../js_tutorials/100_js_examples.html">Javascript示例代码</a>
</div>
</td>
</tr></table>
</div>
<div class=wscontent>
<table cellpadding=0 cellspacing=0 class=wscgrid>
<td class=a1>
<div class=wsmenu><div class=box><div class=box>
<!--menupart Start -->
<a href = "../index.html"><H1>网站首页</H1></a>
<a href = "index.html" ><H1>HTML元素参考</H1></a><a href = "../html_attr_ref/index.html" ><H1>HTML属性参考</H1></a>
<!--menupart end -->
</div></div></div>
</td>
<td class=a2><div class=wsarticle><div class=articlepart id = ap>
<div class=wstitle><div class=box><div class=box><h1>HTML元素 - map</h1></div></div></div>
<!--articlepart start-->
<div class = changefont>
<span onclick= "ap.className='ArticlePartBig';" class = bfont>大字体</span>
<span onclick= "ap.className='ArticlePart';" class = sfont>小字体</span>
</div>
<H2>定义</H2><P>包含客户端图像映射的坐标数据。</P><P>Contains coordinate data for client-side image maps. </P><H2>注释</H2><P>所谓图像映射，就是带有预先定义区域的图像，这些区域包含了指向其它文档或锚的链接。例如，你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接。</P><P>map 对象由 IMG 元素的 USEMAP 属性引用，格式如下：</P><PRE><IMG SRC="solarsys.gif" USEMAP="#SystemMap"></PRE><P>MAP 元素包含一组定义图像中链接区域的 AREA 元素。</P><P>此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。</P><P>此元素不会改变显示。</P><P>此元素需要关闭标签。</P><P>An image map is a graphic image, with predefined regions, that contains links to other documents or anchors. For example, you could create an image of the solar system containing links that the user can click to navigate to pages for the individual planets.</P><P>The map object is referenced with the USEMAP attribute in an IMG element, as follows: </P><PRE><IMG SRC="solarsys.gif" USEMAP="#SystemMap"></PRE><P>A MAP element contains a set of AREA elements defining the linking regions in the image.</P><P>This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.</P><P>This element is not rendered.</P><P>This element requires a closing tag.</P><H2>示例代码</H2><P>下面的例子提供了一个太阳系的图像映射代码。该代码在 MAP 元素中使用 AREA 元素及其 COORDS 值和 SHAPE 标签属性创建了由图象映射指向单个行星图像的链接。用户可以点击太阳或其它星球来单独浏览单个星球的图像，要返回到太阳系图像映射，用户可以单击后退按钮。</P><P>This example provides the full code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.</P><PRE><P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 ALT="Solar System" USEMAP="#SystemMap"></PRE><PRE> </PRE><PRE><MAP NAME="SystemMap"></PRE><PRE><AREA SHAPE="rect" COORDS="0,0,82,126" HREF="sun.gif" alt="sun"></PRE><PRE><AREA SHAPE="circle" COORDS="90,58,3" HREF="merglobe.gif" alt="mercury"></PRE><PRE><AREA SHAPE="circle" COORDS="124,58,8" HREF="venglobe.gif" alt="venus"></PRE><PRE><AREA SHAPE="circle" COORDS="162,58,10" HREF="earglobe.gif" alt="earth"></PRE><PRE><AREA SHAPE="circle" COORDS="203,58,8" HREF="marglobe.gif" alt="mars"></PRE><PRE><AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" HREF="jupglobe.gif" alt="jupiter"></PRE><PRE><AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" HREF="satglobe.gif" alt="saturn"></PRE><PRE><AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" HREF="uraglobe.gif" alt="uranus"></PRE><PRE><AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" HREF="nepglobe.gif" alt="neptune"></PRE><PRE><AREA SHAPE="circle" COORDS="479,66,3" HREF="pluglobe.gif" alt="pluto"></PRE><PRE></MAP></PRE><PRE> </PRE><P><A href="../asdocs/html_tutorials/maparea.html">演示示例</A></P><P> </P><P> </P><P> </P><P> </P>
<!--articlepart end-->
</div><div></td>
<td class=a3><div class=wslink>
<div class=wsportrait>
<img src="../images/logo/blabla_logo02.gif" class=blablalogo21>
</div>
<div class=wslgreen><div class=box><div class=box>
<h2>布啦布啦旗下网站</h2>
<p><a href="../index.html">布啦布啦网页教程与代码</a></p>
<p><a href="http://www.wowstory.com">小斧的魔兽世界</a></p>
<p><a href="../wow/index.html">小斧的魔兽世界镜像</a></p>
<p><a href="http://hardware.blabla.cn">数码资讯</a></p>
</div></div></div>
<div style= "background-color:#FFFFF0;
border-top:3px solid #FFCC66; border-bottom:3px solid #FFCC66;border-left:1px solid #FFE0A1;border-right:1px solid #FFE0A1;">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="blabla.cn"></input>
<input type="text" name="q" size="18" maxlength="255" value=""></input>
</td></tr>
<tr>
<td> </td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value=""></input>
<font size="-1" color="#000000" style = "font-size:12px;">Web</font>
</td>
<td>
<input type="radio" name="sitesearch" value="blabla.cn" checked="checked"></input>
<font size="-1" color="#000000" style = "font-size:12px;">blabla.cn</font>
</td>
</tr>
</table>
<input type="submit" name="sa" value="Google 搜索"></input>
<input type="hidden" name="client" value="pub-3105632846497229"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
<div style ="height:8px;font-size:8px;"></div>
<!--Google Adsense start-->
<div id="googlead" style = "width:160px; height:600px;" ></div>
<!--Google Adsense end-->
</div>
</td></tr>
</table></div>
<div class=wsfooter>
<table cellpadding=0 cellspacing=0 class=wsgrid>
<tr><td class=ws_a1>
<!--footer label start-->
© 2005 blabla.cn版权所有
<!--51yes statistics start-->
<script language="javascript" src="http://count1.51yes.com/click.aspx?id=13420718&logo=12"></script>
<!--51yes statistics end-->
</td></tr></table>
</div>
<!--Google Ad Script Start -->
<div id="googleadcode" style="display:none;">
<script type="text/javascript"><!--
google_ad_client = "pub-3105632846497229";
google_alternate_color = "FFFFFF";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "A8C8FF";
google_color_bg = "F5F9FF";
google_color_link = "0058DB";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script language="javascript">
if(document.all.item("googlead") != null)
{
googlead.innerHTML = googleadcode.innerHTML;
}
</script>
<!--Google Ad Script End-->
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -