網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>圖片特效特效代碼>

圖像映射_圖片特效特效

特效Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

圖像映射,您可以先修改部分代碼再運(yùn)行.

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   class="7lvnlph"   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>這個(gè)是我的IBM筆記本</span></a></dd>
		<dt id="floppy">5. 擴(kuò)展軟驅(qū)</dt>
		<dd id="floppyDef"><a href="#"><span>老的擴(kuò)展軟驅(qū)</span></a></dd>
	</dl>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時(shí)間：2012-10-31

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)圖片特效特效：

圖像映射_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些