京东 专题 左侧滑 图片PNG 透明实现

 

例子 

利用

id="sidepanel" 的样式 
方向控制

left:2%; top:2%;

<div id="sidepanel" style="left:2%; top:2%; width:177px; height:641px; opacity:100; ">
    <img src="http://img11.360buyimg.com/cms/jfs/t469/150/1474284468/106926/d3f698fa/54ed70faNad8957e9.png" alt="" width="177" height="641" usemap="#Map177" />
    <map name="Map177">  
        <area shape="rect" coords="20,200,151,236" href="http://sale.jd.com/mall/nOwdieXm3NP05.html" />  <area shape="rect" coords="20,240,151,275" href="http://sale.jd.com/mall/gdFo1bLJwN3.html" target="_blank" />  <area shape="rect" coords="21,280,150,316" href="http://sale.jd.com/mall/grH5IYLwvjlpWqR.html" target="_blank" />  <area shape="rect" coords="20,319,151,356" href="http://sale.jd.com/mall/EZ73faGVKC5A8.html" target="_blank" />  <area shape="rect" coords="24,360,148,393" href="http://sale.jd.com/mall/pAZXTnhlKz6kxNf.html" target="_blank" />  <area shape="rect" coords="22,397,145,433" href="http://sale.jd.com/mall/bq62up7n4VP0s.html" target="_blank" />  <area shape="rect" coords="22,438,147,474" href="http://sale.jd.com/mall/b47zq6dKEAmRQ.html" target="_blank" />  <area shape="rect" coords="25,479,147,514" href="http://sale.jd.com/mall/CPJ3qAGxvXnL.html" target="_blank" />  <area shape="rect" coords="23,519,146,554" href="http://sale.jd.com/mall/i36TI2fMFAPLnC.html" target="_blank" />  <area shape="rect" coords="25,557,148,592" href="http://sale.jd.com/mall/rL25X8UyscFA.html" target="_blank" />  <area shape="rect" coords="21,599,165,647" href="http://sale.jd.com/mall/gdYFCkzNTiujD.html" target="_blank" />
    </map>
</div>