第30课JavaScript使用onmouseover事件来对图片内容进行解释

作者(出处):百宝箱工作室发布时间:2015年3月21日 16:23:23查阅量:357

<!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=gb2312" />
<title>百宝箱工作室IT微课堂 http://www.baibaox.com</title>
<script>
function writeText(txt)
{
	document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<p>JavaScript 使用 onmouseover 事件:</p>
<img src ="img/planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('太阳和气体巨星类似木星是太阳系中最大的物体。')"
href ="img/sun.gif" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onmouseover="writeText('从地球上很难研究水星,因为它太接近太阳。')"
href ="img/merglobe.gif" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onmouseover="writeText('直到1960年,金星经常被认为是地球的孪生妹妹,因为金星是最靠近我们的行星,并且两个行星有很多相似的特点。')" t')"
href ="img/venglobe.gif" target ="_blank" alt="Venus" /></map> 
<p id="desc">鼠标在太阳和星星上移动,可以看到不同的描述。</p>
</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息