JavaScript 图像地图
图像地图指的是带有可点击区域的图像。
实例
简单的 HTML 图像映射
本例演示一幅没有添加 JavaScript 的图像映射。
添加了 JavaScript 的图像映射
本例演示一幅添加了 JavaScript 的图像映射,当鼠标浮动于某个热点上时,会调用 JavaScript 函数来显示热点所对应的星球的简介。
JavaScript 图像地图
我们已经从 HTML 教程中了解到,图像地图是带有可点击区域的图像。通常情况下,每个区域是一个相关的超级链接。单击某个区域,就回到达相关的链接。
实例
下面的例子演示如何创建带有可点击区域的 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>
结果
添加 JavaScript
我们可向图像地图内部的 <area> 标签添加(能调用JavaScript的)事件。<area>
标签支持以下事件:onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、
onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。
这是添加了 JavaScript 的上面的例子:
<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
相关文档:
Javascript中最常用的55个经典技巧 收藏
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table
2. <body onselectstart="return false"> 取消选取、防止复制
3. onpaste="return false" 不准粘贴
4 ......
Code:
<!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>
<title>无标题页</title>
<mce:script language="javascript" type="te ......
命名空间,一看就知道主要目的是为了避免冲突。下面就来说一下如何打造自己的JavaScript命名空间。
打造JavaScript命名空间其实很简单,只需要将自己的函数、对象、变量等放在一个伪命名空间中,即用一个匿名函数包装起来。
(function(){
function $(id){
&n ......
Ajax框架 jQuery
jQuery是一款免费且开放源代码的JavaScript代码库,由John Resig创建。授权协议为GPL和MIT许可证双协议。示例代码: $("p.neat").addClass("ohmy").show("slow"); 特点轻量级经GZip压缩后传输的代码文件仅14KB,未经压缩传送的代码文件仅26KB。 jQuery 1.26版时: 档案档案行数档案Size 备注 jquery-1.2 ......
此文为读《JavaScript And DHTML Cookbook》后总结出来的笔记。由于当时是初学,所以笔记中难免有错误,欢迎指正。谢谢!
·字符串(String)
1.声明
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine.";
&n ......