如何在一张图片上添加多个链接 ，如何利用js做出靠右侧浮动菜单栏的效果

公司要做产品推广页，想在一个图片上加上两个链接，让消费者点击后跳转到不同页面。于是利用firebug查看了一下京东的做法，照葫芦画瓢，做法如下。

<div class="abc">
        <img class="" width="990" height="625" border="0" usemap="#Map2" alt="" src="a.jpg">
        <map name="Map2">
            <area target="_blank" href="www.baidu.com" coords="38,6,388,614" shape="rect">
            <area target="_blank" href="www.google.com" coords="580,9,939,612" shape="rect">
        </map>
</div>

很简单，只是利用了HTML 的<map> 标签就可以轻松做到。在img标签中使用 usemap这个属性

其中shape="rect"表示按照矩形来划分。coords属性中的前两个数字表示的是矩形的左上角的坐标。后两个数字表示的右下角的坐标。上一张图就很清晰了：

 

看了下文档，将文档内容粘贴了过来。

ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射，可以通过鼠标来对一个或多个超链接进行选择，也就是通常所说的图像映射（image map）。

图像映射的 ismap 样式被称为 “服务器端”图像映射，它只可以用在 <a> 标签标识的超链接里面。

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" />
</a>

地图就是很好地应用 ismap 和 usemap 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等。
usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。

 

续：活动页要做一个靠右的滚动菜单，随着鼠标的滚动而向下滑动，点击上面的菜单能直接跳到网页中相应的位置。

在网络上找了一个实现了的代码，js部分没怎么看懂，以后有时间再写注释吧，现在暂时记录下来。

html代码如下

<script type="text/javascript" src="js/activity.js"></script>
<script type="text/javascript">    
    window.onload=function (){
        scroll();
}
</script>

<tr><td><img id="02"  src="images/activity/002.jpg" usemap="#Map1" border="0"></td></tr>


<div id="QQFloat" style="position:absolute; width:200px; height:59px; z-index:20; right: 0px; top: 300px">
            <img src="images/activity/sroll.png" usemap="Map00" style="float:right; "/>　　<!--这里的float：right保证图片靠在浏览器的右边上-->
                <map id="Map" name="Map00">
                    <area href="#07" coords="10,230,123,213,122,242,10,261" shape="poly">
                    <area href="#06" coords="10,194,123,177,122,206,10,225" shape="poly">
                    <area href="#05" coords="9,159,122,142,121,171,9,190" shape="poly">
                    <area href="#04" coords="10,123,123,106,122,135,10,154" shape="poly">
                    <area href="#03" coords="8,88,121,71,120,100,8,119" shape="poly">
                    <area href="#02" coords="7,52,120,35,119,64,7,83" shape="poly">
                    <area href="#01" coords="9,16,122,-1,121,28,9,47" shape="poly">
                </map>
</div>

这里有一个知识点，就是点击之后，如何跳转的问题。只要在链接上写上#02,然后给相应的模块里写上 id="02"即可。

activity.js里面的代码如下　

/*活动页面用到的js文件 */
/*右侧浮动菜单栏的js，用于控制菜单图片始终于浏览器的头部保持一个固定的距离*/
    
function scroll(){
    moveTips();
}

function moveTips() {
    var tips = document.getElementById("QQFloat");
    var theTop = 190　　　　　　　　　　　　/*这是默认高度,即图片最初距离浏览器的高度  越大越往下*/; 
    var old = theTop;
    
    var tt=10;
    if (window.innerHeight) {
        pos = window.pageYOffset
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        pos = document.documentElement.scrollTop
    }
    else if (document.body) {
        pos = document.body.scrollTop;
    }

        pos=pos-tips.offsetTop+theTop;
        pos=tips.offsetTop+pos/10;
     
        if (pos < theTop) pos = theTop;
        if (pos != old) {
            tips.style.top = pos+"px";
            tt=10;
            //alert(tips.style.top);
        }
            old = pos;
            setTimeout(moveTips,tt);
}

　用到的图片为