热点单张图片弹出多个提示的效果

作者：简简单单 2009-09-08

提示：您可以先修改部分代码再运行

热点单张图片弹出多个提示的效果
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href=http://111com.net/cssdiv/css.html target=_blank >css</a>">
body{font-size:12px;color:#303030;}
a{color:#303030;}
a:hover{color:black;}
img{display:none;}
dl#officeMap{margin:0;padding:0;background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) top left no-repeat;position:relative;}
dt{margin:0;padding:0;position:absolute;font-size:12px;display:none;}
dd{margin:0;padding:0;position:absolute; font-size:12px;}
dd#monitorDef{top:111px;left:84px;}
dd#monitorDef a{position:absolute;text-decoration:none;}
dd#monitorDef a span{display:none;}
dd#monitorDef a:hover{position:absolute;background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -84px -506px no-repeat;top:0px;left:0px;}
dd#monitorDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #ff00ff;top:100%;margin:0;padding:5px;}
dd#phoneDef{top:143px;left:185px;}
dd#phoneDef a{position:absolute;text-decoration:none;}
dd#phoneDef a span{display:none;}
dd#phoneDef a:hover{background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -185px -538px no-repeat;}
dd#phoneDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #BCBCBC;bottom:100%;margin:0;padding:5px;}
dd#caseDef{top:179px;left:157px;}
dd#caseDef a{position:absolute;text-decoration:none;	}
dd#caseDef a span{display:none;}
dd#caseDef a:hover{background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -157px -574px no-repeat;}
dd#caseDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #BCBCBC;top:100%;margin:0;padding:5px;}
dd#notebookDef{top:173px;left:243px;}
dd#notebookDef a{position:absolute;text-decoration:none;}
dd#notebookDef a span{display:none;}
dd#notebookDef a:hover{background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -243px -568px no-repeat;}
dd#notebookDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #BCBCBC;top:100%;margin:0;padding:5px;}
dd#floppyDef{top:139px;left:260px;}
dd#floppyDef a{position:absolute;text-decoration:none;}
dd#floppyDef a span{display:none;}
dd#floppyDef a:hover{background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -260px -534px no-repeat;}
dd#floppyDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #BCBCBC;top:100%;left:1px;margin:0;padding:5px;}
dd#dependentDef{top:215px;left:75px;}
dd#dependentDef a{position:absolute;text-decoration:none;}
dd#dependentDef a span{display:none;}
dd#dependentDef a:hover{background:transparent url(http://www.zzsky.cn/effect/images/chinamap.jpg) -75px -610px no-repeat;}
dd#dependentDef a:hover span{display:block;text-indent:0;vertical-align:top;color:#000;background-color:#F4F4F4;position:absolute;border:1px solid #BCBCBC;top:100%;left:1px;margin:0;padding:5px;}
</style>
<script type="text/<a href=http://111com.net/js_a/js.html target=_blank >javascript</a>">
	function addTriggers(){
		if ( document.getElementByID || document.createTextNode ){
			// Retrieve all <dt>s in the "officeMap" def. list
			dds = document.getElementById("officeMap").getElementsByTagName("dd");
			// Add mouseover/mouseout events
			for (i = 0; i < dds.length; i++){
				dds[i].onmouseover = function(){ switchIt(this); };
				dds[i].onmouseout = function(){ switchIt(this); };
			}
		}
	}
	// Hides/Displays text within a <dd> related to calling <dt>
	function switchIt(obj){
		// Test to make sure previousSibling is not whitespace!
		var item = obj.previousSibling;
		while (item.nodeType != 1){
			item = item.previousSibling;
		}
		if (item.style.display == "block"){
			item.style.display = "none";
			return;
		}
		// Style accordingly
		item.style.color = "black";
		item.style.fontWeight = "bold";
		item.style.top = "275px";
		item.style.display = "block";
	}
	// Disabled for example
	window.onload = addTriggers;
</script>
</head>
<body>

<div id="ex">
  <dl id="officeMap">
	<dt id="monitor">台式机</br>你觉得他什么时候会响？</dt>
	<dd id="monitorDef"><a href="#"><span>这是一台17寸的台式电脑价格是3000元。</span></a></dd>
	<dt id="phone">电话</dt>
	<dd id="phoneDef"><a href="#"><span>你觉得他什么时候会响？</span></a></dd>
	<dt id="case">PC主机</dt>
	<dd id="caseDef"><a href="#"><span>主机箱，挺大的，只争朝夕、口若悬河、水落石出！</span></a></dd>
	<dt id="notebook">手提</dt>
	<dd id="notebookDef"><a href="#"><span>最近我买了一台手提，花了不少钱。</span></a></dd>
	<dt id="floppy">软盘驱动器</dt>
	<dd id="floppyDef"><a href="#"><span>软盘驱动器，很漂亮。</span></a></dd>
	<dt id="dependent">独出心裁</dt>
	<dd id="dependentDef"><a href="#"><span>独占鳌头，独树一帜。</span></a></dd>
  </dl>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

热点单张图片弹出多个提示的效果

相关文章

精彩推荐