在图片上加上“上一张”、“下一张”链接

UCH 浏览图片的默认模板 space_album_pic.htm 是这样的：

        <div class="photobox">
                <a href="space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=down"><img src="$pic[pic]" alt="$pic[title]" /></a>
        </div>

也就是点击后只能到下一张，单向循环，有些死板。

可以改成，当用户点击图片左半部分的时候，到“上一张”，点击图片右半部分的时候，到“下一张”。



===============================================================

下面说一下我的思路，只是演示，如果要使用，或者想更简洁，还需要修改代码:)

用CSS在图片上控制覆盖一个可点击的透明层，用JS来计算使得该层符合期望的大小。

===============================================================

为了演示清晰明了，我给每个元素都加了ID，JS也写的非常繁琐，便于说明。

先把那部分代码改成：
        <div id="demo_photobox" class="photobox demo_pbox">
                <div class="demo_prenext"><a href="space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=up" title="上一张" id="demo_pre">上一张</a></div>
                <div class="demo_prenext"><a href="space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=down" title="下一张" id="demo_next">下一张</a></div>
                <img src="$pic[pic]" alt="$pic[title]" id="demo_photo" />
        </div>

然后在页面底部的JS里加入：
        //简单的添加上一张下一张
        window.onload = function(){
                var boxw , boxh , photow , photoh , pre , next;
                //boxw是计算包含图片这个层的宽度
                boxw = $("demo_photobox").clientWidth;
                //boxh是计算包含图片这个层的高度
                boxh = $("demo_photobox").clientHeight;
                //photow是计算图片宽度
                photow = $("demo_photo").width;
                //photoh是计算图片高度
                photoh = $("demo_photo").height;
                //pre、next是进行点击操作的层
                pre = $("demo_pre");
                next = $("demo_next")

                //spc是计算图片和图片外层之间的间距
                spc = (boxw - photow)/2 +"px";
                //w是计算图片的一半宽度
                w = photow/2 + "px";
                //h是计算图片的一半宽度
                h = photoh + "px";

                //改变pre和next的位置、高度、宽度使之刚好盖在图片上
                pre.parentNode.style.left = next.parentNode.style.right = spc;
                pre.style.width = next.style.width = w;
                pre.style.height = next.style.height = h;
        }

然后在common.css里添加样式：
.demo_pbox{ position:relative; }
.demo_prenext{ position:absolute; text-indent:-9999px; }/* 绝对定位以使刚才的JS能够生效，同时隐藏a里的文字 */
        .demo_prenext a{ display:block; }/* 改变a为块级元素，使得整个图片大小区域均可点击 */
                .demo_prenext a#demo_pre:hover{ background:url(这里放上你想用户鼠标放上去后显示的指示图片) no-repeat right center; opacity:0.6; filter:Alpha(opacity=60); }
                .demo_prenext a#demo_next:hover{ background:url(这里放上你想用户鼠标放上去后显示的指示图片) no-repeat left center; opacity:0.6; filter:Alpha(opacity=60); }
                /* 定义指示图片及透明度等，大家自己美化 */

[ 本帖最后由 Pony.M 于 2008-5-6 15:16 编辑 ]

能把修改好的文件提供下载吗?
方便大家

顶~好东西号功能

原帖由 Pony.M 于 2008-5-6 15:14 发表
UCH 浏览图片的默认模板 space_album_pic.htm 是这样的：

        
               
        

也就是点击后只能到下一张，单向循环，有些死板。

可以改成，当用户点击图片左半部分的时候，到“上一张”， ...

漂亮 這個就是我要的。/

牛X 支持

嗯，好啊支持下~~