以前有看到类似的，一般的做法是首先放一张地图，然后放一些类似于图钉之类的小图标，利用相对定位把他定到你要放的省份或者城市那里，当鼠标移动到这些小图标就显示出隐藏的内容。
代码大概是这样子写
<div id="ditu"><li><span></span><div class="yin">广东张三135XXXXXXXX</div></li>
<li><span></span><div class="yin">北京李四138XXXXXXXX</div></li>
<li><span></span><div class="yin">上海王五139XXXXXXXX</div></li>
</div>
<style>
#ditu{position:relativewidth:1000pxheight:1000pxbackground:url('ditu.jpg') no-repeat}
#ditu li{position:absolute}
#ditu li span{bakcground:url('tubiao.jpg') no-repeat}
#ditu li .yin{display:none}
#ditu li:hover .yin{display:block}
</style>
代码就是这样，然后用nth:child()来定义每一个li的位置就行了
<html><head>
<title>5-15天气预报图像映射</title>
</head>
<body>
<p align="center">
<a href="郑州.html"><img src="images/chmap.jpg" width="650" height="538" border="0" usemap="#china"></a>
<map name="china">
<area shape="rect" coords="436,272,492,308" href="郑州.html" alt="郑州">
<area shape="circle" coords="497,196,14" href="北京.html" alt="北京">
<area shape="circle" coords="560,327,16" href="上海.html" alt="上海">
<area shape="poly" coords="542,110,629,130,587,169" href="长春.html" alt="长春">
</map>
</p>
<br>
<br>
<h2 align="left"> </h2>
<h2 align="left"> </h2>
<h2 align="left"> </h2>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）