当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS Image Maps

JavaScript
JS 介绍
JS 怎样使用
JS 在哪使用
JS 变量
JS If...Else
JS Switch
JS 操作符
JS Popup Boxes
JS 函数
JS For 循环
JS While 循环
JS Break 循环
JS For...In
JS 事件
JS Try...Catch
JS Throw
JS onerror
JS 特殊字符
JS Guidelines
JS 对象介绍

JavaScript 中的 JS Image Maps


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1210 ::
收藏到网摘: n/a

An image-map is an image with clickable regions.
图象映象是图片的可点区域(一图片多个链接区)


Examples
举例

Simple HTML Image map[简单的图象映象]

Image map with added JavaScript[添加JS的图象映象(多了文字的说明)]


HTML Image Maps
HTML 图象映象

From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link.
从HTML教程我们已经学过图象映象是图象中可点击的区域。通常每个区域都有一个相关的链接。点击后会带你去相关的连接上。

Example
举例

The example below demonstrates how to create an HTML image map, with clickable regions. Each of the regions is a hyperlink:
下面的例子演示了怎样建立一个HTML图象映象:

<img src ="planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" />
</map> 

Result结果

Planets Sun Mercury Venus

Adding some JavaScript
添加一些JS

We can add events (that can call a JavaScript) to the <area> tags inside the image map. The <area> tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.
我们给图片内的<area>标签里面添加一些事件(可以叫JS)。<area>标签支持onClick,onDblClick,onMouseDown,onMouseUP,onMouseOver,onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, 和 onBlur事件

Here's the above example, with some JavaScript added:
给上面的例子加入以下JS:

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>

评论 (0) All

登陆 | 还没注册?