껴맞추기를 즐기다보니 ㅠ 나름대로 몇시간째 몇날몇일을 해도 진전이 없을 질문 올립니다.
커피킬러님께서 올려주셨던
"[기타] 게시판에 첨부파일 이미지 있는거만 불러오기? 뭐라 해야 할지 ㅡㅡ;; 하여튼 스킨형태는 아닙니다 ㅡㅡ; " 이라는 자료가 있습니다. 링클 걸어두었습니다.
여기서 이미지 혹은 글을 클릭했을시 해당게시판으로 가고싶습니다.
이미지 출력부분은 도저히 모르겠고, 텍스트로 나오는 부분에는
<a href='<?=$list[$i][href]?>'></a> 로 감싸보았지만 소용이 없습니다.
도움을 주세요 부탁드립니다.

[code]
<?
/*필수 조정값 시작*/
$g4_path = "../"; //g4_path 의 경로/현재 root/test/ 에 파일을 생성함
include_once("$g4_path/common.php");


$width_body = '800px'; //가로길이
$height_body = '700px'; //세로길이
$background_color = '#000'; //백그라운드칼라
$bg_top = '#222';  //컨텐츠 이미지 상단 색상 - 말이 어렵네요 ㅡㅡ;
$track = ''; //트랙 이미지 경로
$img_count = '10'; //이미지 출력 갯수
$target_board = "mybox"; //이미지를 뽑아올 게시판명
$text_1 = 'wr_datetime'; //상단출력 할 글. 시간 출력함
$text_2 = 'wr_subject'; //상단출력 할 글. 제목 출력함
/*필수 조정값 끝*/


/*쿼리문 시작*/


$g4[g4_board_file] = "g4_board_file"; //수정하지 마세요^^ 
$one_rows = $img_count;  // 이미지 출력수량,

//jpg, jpeg, gif, png 파일만 검색한다.
$one_like  = " (bf_file LIKE '%jpg' or bf_file LIKE '%jpeg' or bf_file LIKE '%gif' or bf_file LIKE '%png') ";
$one_like_02  = " (b.bf_file LIKE '%jpg' or b.bf_file LIKE '%jpeg' or b.bf_file LIKE '%gif' or b.bf_file LIKE '%png') ";

$one_count_sql = " select count(*) as cnt from $g4[g4_board_file] where $one_like and bo_table = '$target_board' ";
$row = sql_fetch($one_count_sql);
$total_count = $row[cnt];
$total_page  = ceil($total_count / $one_rows);  // 전체 페이지 계산
if ($page == "") { $page = 1; } // 페이지가 없으면 첫 페이지 (1 페이지)
$from_record = ($page - 1) * $one_rows; // 시작 열을 구함
$to_record = $from_record + $one_rows ;

//첨부파일 이미지를 불러오기 위한 코드 
$one_sql      = " select * from $g4[g4_board_file] where $one_like and bo_table = '$target_board' order by bf_datetime desc limit $from_record, $one_rows";
$one_result      = sql_query($one_sql);

//게시물의 글을 불러오기 위한 코드
$one_sql_02 = " select * from g4_write_$target_board a, $g4[g4_board_file] b where $one_like_02 and b.bo_table = '$target_board' and a.wr_id = b.wr_id order by bf_datetime desc limit $from_record, $one_rows ";
$one_result_02      = sql_query($one_sql_02);

/*쿼리문 끝*/
?>


<style type="text/css">
    #imageFlow {
        position: absolute;
        width: <?= $width_body ?>;
        height: <?= $height_body ?>;
        left: 0%;
        top: 10%;
        overflow: hidden;
        background: <?= $background_color ?>;
    }
    #imageFlow .diapo {
        position: absolute;
        left: -1000px;
        cursor: pointer;
        -ms-interpolation-mode: nearest-neighbor;
    }
    #imageFlow .link {
        border: dotted #fff 1px;
        margin-left: -1px;
        margin-bottom: -1px;
    }
    #imageFlow .bank {
        visibility: hidden;
    }
    #imageFlow .top {
        position: absolute;
        width: 100%;
        height: 40%;
        background: <?= $bg_top ?> /*이미지 컨텐츠 출력 상단 색상*/
    }
    #imageFlow .text {
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 16%;
        text-align: center;
        color: #FFF;
        font-family: verdana, arial, Helvetica, sans-serif;
        z-index: 1000;
    }
    #imageFlow .title {
        font-size: 0.9em;
        font-weight: bold;
    }
    #imageFlow .legend {
        font-size: 0.8em;
    }
    #imageFlow .scrollbar {
        position: absolute;
        left: 10%;
        bottom: 10%;
        width: 80%;
        height: 16px;
        z-index: 1000;
    }
    #imageFlow .track {
        position: absolute;
        left: 1%;
        width: 98%;
        height: 16px;
        filter: alpha(opacity=30);
        opacity: 0.3;
    }
    #imageFlow .arrow-left {
        position: absolute;
    }
    #imageFlow .arrow-right {
        position: absolute;
        right: 0px;
    }
    #imageFlow .bar {
        position: absolute;
        height: 16px;
        left: 25px;
    }
</style>

<script type="text/javascript">


var imf = function () {
    /* //////////// ==== private methods ==== //////////// */
    var lf = 0;
    var instances = [];
    /* ===== custom getElementsByClass ==== */
    function getElementsByClass (object, tag, className) {
        var o = object.getElementsByTagName(tag);
        for ( var i = 0, n = o.length, ret = []; i < n; i++)
            if (o[i].className == className) ret.push(o[i]);
        if (ret.length == 1) ret = ret[0];
        return ret;
    }
    /* ===== crossbrowsers addEvent ==== */
    function addEvent (o, e, f) {
        if (window.addEventListener) o.addEventListener(e, f, false);
        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
    }
    /* ===== create image reflexion ==== */
    function createReflexion (cont, img) {
        var flx = false;
        if (document.createElement("canvas").getContext) {
            /* ---- canvas ---- */
            flx = document.createElement("canvas");
            flx.width = img.width;
            flx.height = img.height;
            var context = flx.getContext("2d");
            context.translate(0, img.height);
            context.scale(1, -1);
            context.drawImage(img, 0, 0, img.width, img.height);
            flx.style.opacity = '0.35';
        } else {
            /* ---- DXImageTransform ---- */
            flx    = document.createElement('img');
            flx.src = img.src;
            flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
                              'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
                              (img.height * .25) + ')';
        }
        /* ---- insert Reflexion ---- */
        flx.style.position = 'absolute';
        flx.style.left    = '-1000px';
        cont.appendChild(flx);
        return flx;
    }
    /* //////////// ==== ImageFlow Constructor ==== //////////// */
    function ImageFlow(oCont, horizon, size, zoom, border, start, interval) {
        this.diapos    = [];
        this.scr        = false;
        this.size      = size;
        this.zoom      = zoom;
        this.horizon    = horizon;
        this.bdw        = border;
        this.oCont      = oCont;
        this.oc        = document.getElementById(oCont);
        this.scrollbar  = getElementsByClass(this.oc,  'div', 'scrollbar');
        this.text      = getElementsByClass(this.oc,  'div', 'text');
        this.title      = getElementsByClass(this.text, 'div', 'title');
        this.legend    = getElementsByClass(this.text, 'div', 'legend');
        this.bar        = getElementsByClass(this.oc,  'img', 'bar');
        this.arL        = getElementsByClass(this.oc,  'img', 'arrow-left');
        this.arR        = getElementsByClass(this.oc,  'img', 'arrow-right');
        this.bw        = this.bar.width;
        this.alw        = this.arL.width - 5;
        this.arw        = this.arR.width - 5;
        this.bar.parent = this.oc.parent  = this;
        this.arL.parent = this.arR.parent = this;
        this.view      = this.back      = -1;
        this.time_start = start * 62.5 || 0;
        this.time_inter = interval * 62.5 || 0;
        this.time_out  = this.time_start;
        this.time      = 0;
        this.time_dir  = 1;
        this.resize();
        this.oc.onselectstart = function () { return false; }
        /* ---- create images ---- */
        var img  = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
        this.NF = img.length;
        for (var i = 0, o; o = img[i]; i++) {
            this.diapos[i] = new Diapo(this, i,
                                        o.href,
                                        o.title || '- ' + i + ' -',
                                        o.innerHTML || o.href,
                                        o.rel || '',
                                        o.target || '_self'
            );
        }
        /* ==== add mouse wheel events ==== */
        if (window.addEventListener)
            this.oc.addEventListener('DOMMouseScroll', function(e) {
                this.parent.scroll(-e.detail);
                return false;
            }, false);
        this.oc.onmousewheel = function () {
            this.parent.scroll(event.wheelDelta);
            return false;
        }
        /* ==== scrollbar drag N drop ==== */
        this.bar.onmousedown = function (e) {
            if (!e) e = window.event;
            var scl = e.screenX - this.offsetLeft;
            var self = this.parent;
            /* ---- move bar ---- */
            this.parent.oc.onmousemove = function (e) {
                if (!e) e = window.event;
                self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
                self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * (self.NF-1));
                if (self.view != self.back) self.calc();
                return false;
            }
            /* ---- release scrollbar ---- */
            this.parent.oc.onmouseup = function (e) {
                self.oc.onmousemove = null;
                return false;
            }
            return false;
        }
        /* ==== right arrow ==== */
        this.arR.onclick = this.arR.ondblclick = function () {
            if (this.parent.view < this.parent.NF - 1)
                this.parent.calc(1);
        }
        /* ==== Left arrow ==== */
        this.arL.onclick = this.arL.ondblclick = function () {
            if (this.parent.view > 0)
                this.parent.calc(-1);
        }
    }
    /* //////////// ==== ImageFlow prototype ==== //////////// */
    ImageFlow.prototype = {
        /* ==== targets ==== */
        calc : function (inc) {
            if (inc) {
                this.view += inc;
                /* ---- stop autoscroll ---- */
                this.time = 0;
                this.time_out = this.time_start;
            }
            var tw = 0;
            var lw = 0;
            var o = this.diapos[this.view];
            if (o && o.loaded) {
                /* ---- reset ---- */
                var ob = this.diapos[this.back];
                if (ob && ob != o) {
                    ob.img.className = 'diapo';
                    ob.z1 = 1;
                }
                /* ---- update legend ---- */
                this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
                this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
                /* ---- update hyperlink ---- */
                if (o.url) {
                    o.img.className = 'diapo link';
                    window.status = 'hyperlink: ' + o.url;
                } else {
                    o.img.className = 'diapo';
                    window.status = '';
                }
                /* ---- calculate target sizes & positions ---- */
                if(o.r < 1) o.w1 = Math.min(o.iw, this.wh * .8, Math.round(this.ht * this.horizon / o.r)) * o.z1;
                else o.w1 = Math.round(this.ht * this.horizon / o.r) * o.z1;
                var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
                var x = x0 + o.w1 + this.bdw;
                for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
                    if (o.loaded) {
                        o.x1 = x;
                        o.w1 = (this.ht / o.r) * this.size;
                        x  += o.w1 + this.bdw;
                        tw  += o.w1 + this.bdw;
                    }
                }
                x = x0 - this.bdw;
                for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
                    if (o.loaded) {
                        o.w1 = (this.ht / o.r) * this.size;
                        o.x1 = x - o.w1;
                        x  -= o.w1 + this.bdw;
                        tw  += o.w1 + this.bdw;
                        lw  += o.w1 + this.bdw;
                    }
                }
                /* ---- move scrollbar ---- */
                if (!this.scr && tw) {
                    var r = (this.ws - this.alw - this.arw - this.bw) / tw;
                    this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
                }
                /* ---- save preview view ---- */
                this.back = this.view;
            }
        },
        /* ==== mousewheel scrolling ==== */
        scroll : function (sc) {
            if (sc < 0) {
                if (this.view < this.NF - 1) this.calc(1);
            } else {
                if (this.view > 0) this.calc(-1);
            }
        },
        /* ==== resize  ==== */
        resize : function () {
            this.wh = this.oc.clientWidth;
            this.ht = this.oc.clientHeight;
            this.ws = this.scrollbar.offsetWidth;
            this.calc();
            this.run(true);
        },
        /* ==== animation loop ==== */
        run : function (res) {
            /* ---- move all images ---- */
            var i = this.NF;
            while (i--) this.diapos[i].move(res);
            /* ---- autoscroll ---- */
            if (this.time_out) {
                this.time++;
                if (this.time > this.time_out) {
                    this.view += this.time_dir;
                    if (this.view >= this.NF || this.view < 0) {
                        this.time_dir = -this.time_dir;
                        this.view += this.time_dir * 2;
                    }
                    this.calc();
                    this.time = 0;
                    this.time_out = this.time_inter;
                }
            }
        }
    }
    /* //////////// ==== Diapo Constructor ==== //////////// */
    Diapo = function (parent, N, src, title, text, url, target) {
        this.parent        = parent;
        this.loaded        = false;
        this.title        = title;
        this.text          = text;
        this.url          = url;
        this.target        = target;
        this.N            = N;
        this.img          = document.createElement('img');
        this.img.src      = src;
        this.img.parent    = this;
        this.img.className = 'diapo';
        this.x0            = this.parent.oc.clientWidth;
        this.x1            = this.x0;
        this.w0            = 0;
        this.w1            = 0;
        this.z1            = 1;
        this.img.parent    = this;
        this.img.onclick  = function() { this.parent.click(); }
        this.parent.oc.appendChild(this.img);
        /* ---- display external link ---- */
        if (url) {
            this.img.onmouseover = function () { this.className = 'diapo link';    }
            this.img.onmouseout  = function () { this.className = 'diapo'; }
        }
    }
    /* //////////// ==== Diapo prototype ==== //////////// */
    Diapo.prototype = {
        /* ==== HTML rendering ==== */
        move : function (res) {
            var that = this.parent;
            if (this.loaded) {
                var sx = this.x1 - this.x0;
                var sw = this.w1 - this.w0;
                if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
                    /* ---- paint only when moving ---- */
                    this.x0 += sx * .1;
                    this.w0 += sw * .1;
                    if (this.x0 < that.wh && this.x0 + this.w0 > 0) {
                        /* ---- paint only visible images ---- */
                        this.visible = true;
                        var o = this.img.style;
                        var h = this.w0 * this.r;
                        /* ---- diapo ---- */
                        o.left  = Math.round(this.x0) + 'px';
                        o.bottom = Math.floor(that.ht * (1 - that.horizon)) + 'px';
                        o.width  = Math.round(this.w0) + 'px';
                        o.height = Math.round(h) + 'px';
                        /* ---- reflexion ---- */
                        if (this.flx) {
                            var o = this.flx.style;
                            o.left  = Math.round(this.x0) + 'px';
                            o.top    = Math.ceil(that.ht * that.horizon + 1) + 'px';
                            o.width  = Math.round(this.w0) + 'px';
                            o.height = Math.round(h) + 'px';
                        }
                    } else {
                        /* ---- disable invisible images ---- */
                        if (this.visible) {
                            this.visible = false;
                            this.img.style.width = '0px';
                            if (this.flx) this.flx.style.width = '0px';
                        }
                    }
                }
            } else {
                /* ==== image onload ==== */
                if (this.img.complete && this.img.width) {
                    /* ---- get size image ---- */
                    this.iw    = this.img.width;
                    this.ih    = this.img.height;
                    this.r      = this.ih / this.iw;
                    this.loaded = true;
                    /* ---- create reflexion ---- */
                    this.flx    = createReflexion(that.oc, this.img);
                    if (that.view < 0) that.view = this.N;
                    else if (this.N == 0) that.view = this.N;
                    that.calc();
                }
            }
        },
        /* ==== diapo onclick ==== */
        click : function () {
            /* ---- stop autoscroll ---- */
            this.parent.time = 0;
            this.parent.time_out = this.parent.time_start;
            if (this.parent.view == this.N) {
                /* ---- click on zoomed diapo ---- */
                if (this.url) {
                    /* ---- open hyperlink ---- */
                    window.open(this.url, this.target);
                } else {
                    /* ---- zoom in/out ---- */
                    /*this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
                    this.parent.calc();    이미지 더블 클릭시 원본 사이즈로 보이게 하는 코드 */
this.parent.calc(1); /*이미지 클릭시 오른쪽 이미지로 이동하게 한다*/

                }
            } else {
                /* ---- select diapo ---- */
                this.parent.view = this.N;
                this.parent.calc();
            }
            return false;
        }
    }
    /* //////////// ==== public methods ==== //////////// */
    return {
        /* ==== initialize script ==== */
        create : function (div, horizon, size, zoom, border, start, interval) {
            /* ---- instanciate imageFlow ---- */
            var load = function () {
                var loaded = false;
                var i = instances.length;
                while (i--) if (instances[i].oCont == div) loaded = true;
                if (!loaded) {
                    /* ---- push new imageFlow instance ---- */
                    instances.push(
                        new ImageFlow(div, horizon, size, zoom, border, start, interval)
                    );
                    /* ---- init script (once) ---- */
                    if (!imf.initialized) {
                        imf.initialized = true;
                        /* ---- window resize event ---- */
                        addEvent(window, 'resize', function () {
                            var i = instances.length;
                            while (i--) instances[i].resize();
                        });
                        /* ---- stop drag N drop ---- */
                        addEvent(document.getElementById(div), 'mouseout', function (e) {
                            if (!e) e = window.event;
                            var tg = e.relatedTarget || e.toElement;
                            if (tg && tg.tagName == 'HTML') {
                                var i = instances.length;
                                while (i--) instances[i].oc.onmousemove = null;
                            }
                            return false;
                        });
                        /* ---- set interval loop ---- */
                        setInterval(function () {
                            var i = instances.length;
                            while (i--) instances[i].run();
                        }, 16);
                    }
                }
            }
            /* ---- window onload event ---- */
            addEvent(window, 'load', function () { load(); });
        }
    }
}();

/* ==== create imageFlow ==== */
//          div ID, horizon, size, zoom, border, autoscroll_start, autoscroll_interval
imf.create("imageFlow", 0.75, 0.15, 1.8, 10, 8, 4);

</script>

<? for ($i=0; $one_row = sql_fetch_array($one_result_02); $i++){ ?>
<? ${"text_1". $i} = $one_row[$text_1]?>
<? ${"text_2". $i} = $one_row[$text_2]?>
<? } ?>

<body bgcolor='<?=$background_color?>'>
    <div id="imageFlow">
        <div class="top"></div>
        <div class="bank">

<? for ($i=0; $one_row = sql_fetch_array($one_result); $i++){ ?>
<a href="<?=$g4[path]?>/data/file/<?=$one_row[bo_table]?>/<?=$one_row[bf_file]?>" title="<?=${"text_1". $i}?>"><?=${"text_2". $i}?></a>
<? } ?>

</div>

        <div class="text">
            <div class="title">Loading</div>
            <div class="legend">Please wait...</div>
        </div>
        <div class="scrollbar">
            <img class="track" src="http://www.blueb.co.kr/SRC/javascript/image9/sb.gif" alt="">
            <img class="arrow-left" src="http://www.blueb.co.kr/SRC/javascript/image9/sl.gif" alt="">
            <img class="arrow-right" src="http://www.blueb.co.kr/SRC/javascript/image9/sr.gif" alt="">
            <img class="bar" src="http://www.blueb.co.kr/SRC/javascript/image9/sc.gif" alt="">
        </div>
    </div>
</body>
[/code］