按钮如何在图片上面 说不太清 截张图

这是我的原图
想弄成这样子一下是 代码：
  <div class="zone_rr">
                        <div id="newpic" style="background-color: transparent">
                            <div id="newtitle1">
                                <div class="more"><a href="zone.aspx?Id=0_7_3" target="_parent">更多>></a></div>
                            </div>
                            <div id="newpicimg" visible="false" style="float:left">
                            
                                <ul id="newpicimg_ul">
                                    <asp:Repeater ID="rep_newpic" runat="server">
                                        <ItemTemplate>
                                            <li><a href='<%#"zone.aspx?Id=0_7_3&ts=n2&tsId="+Eval("Id").ToString() %>' target="_parent"><img alt="" src='<%# "images/news/"+Eval("NewsImgPath") %>' /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater> 
                                 </ul> 
        </div>
                                             <div id="newpicbtn" style="float:inherit" >
                                <span id="newpicbtn5" class="Normal"><a href="javascript:void(0);" onclick="">5</a></span>
                                <span id="newpicbtn4" class="Normal"><a href="javascript:void(0);" onclick="">4</a></span>
                                <span id="newpicbtn3" class="Normal"><a href="javascript:void(0);" onclick="">3</a></span>
                                <span id="newpicbtn2" class="Normal"><a href="javascript:void(0);" onclick="">2</a></span>
                                <span id="newpicbtn1" class="Current"><a href="javascript:void(0);" onclick="">1</a></span>
                                </div>
                                          <div>
                                          ADFASDFKASDKFJKDJF
                                          </div>
                      
                        </div>这是 CSS 里面的 ：#newpic #newpicimg{width:260px;height:196px;overflow:hidden; }
#newpic #newpicimg a{width:260px;height:196px;display:block;}
#newpic #newpicimg a img{width:260px;height:196px;border:none;}

解决方案 »

  1.   


    看不到图传到CSDN相册里。。再发上来
      

  2.   

    全部是样式的原因。样式控制的，不同的z-index，不同的位置。通过js写的，你也可以把样式扣出来，固定在那
      

  3.   

    如果你有二图的JS 和CSS了  直接抄袭二图不就行啦？
      

  4.   

    为什么不用JS，要不就用flash来做
      

  5.   

    已经是这样了。。零时要该  我也知道FLASH 容易弄成这样的 
      

  6.   

    只要字在图片上面？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">
         body{margin:0px;padding:0px;text-align:center;}
        .change{position:relative;width:171px;height:250px;overflow:hidden;}
        .bg{position:absolute;z-index:99;top:0px;left:0px;}
        ul{position:absolute;bottom:0px;list-style:none;z-index:100;right:0px;}
        ul li{float:left;background:White;display:block;padding:1px 3px 1px 3px;margin-left:3px;}
        </style>
    </head>
    <body>
        <div class="change">
            <div class="bg">
                <img src="images/p001.jpg" />
            </div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </body>
    </html>
      

  7.   


        <style type="text/css">
        .mouseOver
        {
        cursor:hand;
        border:1px solid red;
        }
        </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            var imgPaths = ["http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg",
            "http://img3.cache.netease.com/sports/2011/2/14/2011021407333047e73.jpg"];
            $(function () {
                $("#showImg").attr("src", imgPaths[0]);
                var top;
                var left;
                var width;
                var height;
                top = $("#showImg").offset().top;
                left = $("#showImg").offset().left;
                width = $("#showImg").width();
                height = $("#showImg").height();
                $("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" });
                $("#popDiv span").hover(function () {
                    $(this).addClass("mouseOver");
                },
                function () {
                    $(this).removeClass("mouseOver")
                }
                ).click(function () {
                    $("#showImg").attr("src", imgPaths[eval($(this).text())-1]);
                });
            });
        </script>
     <div>
            <img id="showImg" alt="" height="400" width="300" src="" />
        </div>
         <div id="popDiv" style="width:300px;height:20px;text-align:right">
              <span>1</span>      
              <span>2</span>
         </div>一个示例，楼主可以参考的改。
      

  8.   

    效果的话，自己运行一下上面的代码就清楚了。跟你想要的差不多。就是CSS方面你要修改为你要求要的。