图像映射_图片特效特效

特效Tag：暂无Tag,欢迎添加,赚取U币!

图像映射,您可以先修改部分代码再运行.

body{
	font-family: "宋体";
	font-size: small;
	background-color: #f3f3f3;
	line-height: 140%;
	color: #303030;
}
div{ margin: 10px; font-family:  "宋体"; }
a{ color: #303030; }
a:hover{ color: black; }
h1, h2{ margin: 2px 10px; padding: 5px; border-bottom: 1px solid #C8C8C8; }
code{ background-color: #FFFFBF; }
div.explanation{ background-color: #FEFEFE; border: 1px solid #C8C8C8; padding: 5px 8px; }
div.explanation p{ margin: 5px 0 10px; padding: 0; }
div.code{ background-color: #fff; padding: 5px 8px; border: 1px solid #C8C8C8; }
div.code pre{ margin: 0; padding: 0; }
div.code code{ background: white; color: black; }
#footer{ font-size: 85%; color: #BBBBBB; }
#footer a{ color: #BBBBBB; }
.spacer{ margin-top: 45px; }

img.image{ display: none; }

dl#officeMap{
	margin: 0;
	padding: 0;
	background: transparent url(jsfile/imagesa35/office.jpg) top left no-repeat;
	height: 262px;
	width: 350px;
	position: relative;
}

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

/* ---------- Hotspot Declarations ---------- */
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(jsfile/imagesa35/office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }
dd#monitorDef a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #000;
	background-color: #F4F4F4;
	font-weight: bold;
	position: absolute;
	border: 1px solid #BCBCBC;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 250%;
}

dd#phoneDef{ top: 111px; left: 211px; }
dd#phoneDef a{ position: absolute; width: 56px; height: 46px; text-decoration: none; }
dd#phoneDef a span{ display: none; }
dd#phoneDef a:hover{ background: transparent url(jsfile/imagesa35/office.jpg) -211px -373px no-repeat; }
dd#phoneDef a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #000;
	background-color: #F4F4F4;
	font-weight: bold;
	position: absolute;
	border: 1px solid #BCBCBC;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 250%;
}

dd#caseDef{ top: 165px; left: 168px; }
dd#caseDef a{ position: absolute; width: 81px; height: 87px; text-decoration: none;	}
dd#caseDef a span{ display: none; }
dd#caseDef a:hover{ background: transparent url(jsfile/imagesa35/office.jpg) -168px -427px no-repeat; }
dd#caseDef a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #000;
	background-color: #F4F4F4;
	font-weight: bold;
	position: absolute;
	border: 1px solid #BCBCBC;
	top: 100%;
	margin: 0;
	padding: 5px;
	width: 250%;
}

dd#notebookDef{ top: 101px; left: 72px; }
dd#notebookDef a{ position: absolute; width: 96px; height: 54px; text-decoration: none; }
dd#notebookDef a span{ display: none; }
dd#notebookDef a:hover{ background: transparent url(jsfile/imagesa35/office.jpg) -72px -625px no-repeat; }
dd#notebookDef a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #000;
	background-color: #F4F4F4;
	font-weight: bold;
	position: absolute;
	border: 1px solid #BCBCBC;
	top: 100%;
	margin: 0;
	padding: 5px;
	width: 150%;
}

dd#floppyDef{ top: 126px; left: 45px; }
dd#floppyDef a{ position: absolute; width: 64px; height: 39px; text-decoration: none; }
dd#floppyDef a span{ display: none; }
dd#floppyDef a:hover{ background: transparent url(jsfile/imagesa35/office.jpg) -45px -388px no-repeat; }
dd#floppyDef a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #000;

background-color: #F4F4F4;
	font-weight: bold;
	position: absolute;
	border: 1px solid #BCBCBC;
	top: 100%;
	left: 1px;
	margin: 0;
	padding: 5px;
	width: 150%;
}

</style>
</head>
<body>

<div id="ex">
	<img src="http://p1.mb5u.com/texiao/2011022516043066.jpg" height="262" width="350" class="image" alt="My Office" />
	<dl id="officeMap">
		<dt id="monitor">1. 显示器</dt>
		<dd id="monitorDef"><a href="#"><span>17寸显示器</span></a></dd>
		<dt id="phone">2. 电话</dt>
		<dd id="phoneDef"><a href="#"><span>它还在响着么?</span></a></dd>
		<dt id="case">3. 电脑</dt>
		<dd id="caseDef"><a href="#"><span>我的疯狂电脑</span></a></dd>
		<dt id="notebook">4. IBM笔记本</dt>
		<dd id="notebookDef"><a href="#"><span>这个是我的IBM笔记本</span></a></dd>
		<dt id="floppy">5. 扩展软驱</dt>
		<dd id="floppyDef"><a href="#"><span>老的扩展软驱</span></a></dd>
	</dl>
</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-10-31

[收藏][报错][返回列表]

图像映射_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些