퍼블리싱 고수님들 도와좀 주세요 ㅠㅠ 채택완료
안녕하세요 질문좀 드리겠습니다
위링스 소스를 사용할려구하는데요
옆에 버튼이 왼쪽에 가있는데 오른쪽으로 가게 하고픈데 어떻게 해야하나요
알려주시면 정말 감사하겠습니다 ㅠㅠ;
Copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>무제 문서</title><style>.image_list {overflow: hidden;position: relative;height: 330px;width: 800px; border:1px solid #e1e1e1; cursor:pointer;}.image_list .images {position:absolute; display:none; }ul, li {list-style:none; margin:0; padding:0;}.ul_label {width:800px;cursor:pointer;}.ul_label li {width:270px;height:50px;text-align:center;}.ul_label li.fir {width:270px;margin:0 auto;}.no_label {width:800px;cursor:pointer;}.no_label li {width:270px;height:50px;float:center;}.ul_label li.labelOverClass {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner1_on.gif');}.ul_label li.labelOverClass1 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner2_on.gif');}.ul_label li.labelOverClass2 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner3_on.gif');}.ul_label li.labelOverClass3 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner4_on.gif');}.ul_label li.labelOverClass4 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner5_on.gif');}.ul_label li.labelOverClass5 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner6_on.gif');}</style><script type="text/javascript"><!-- function RollImage(json){ //À̹ÌÁö ·Ñ¸µ ¼³Á¤°ª var config = { currentImg : 0, nextImg : 1, listArea : e(json.list_area), imageList : e(json.list_area).getElementsByTagName("DIV"), imgCnt : e(json.list_area).getElementsByTagName("DIV").length-1, //0ºÎÅÍ ½ÃÀÛ rollTime : json.roll_time, moveTime : json.move_time, coordX1 : 0, coordX2 : e(json.list_area).offsetWidth, coordY : e(json.list_area).offsetHeight, moveAt : json.moveAt, direction : json.direction, label : e(json.label), labelType : json.labelType }; labelBind(config); //¶óº§(¹öÆ°) ¹ÙÀεå setRoll(config); //·Ñ¸µ ½ÃÀÛ rollPause(config); //¸¶¿ì½º ¿À¹ö½Ã ·Ñ¸µ ¸ØÃã //À̹ÌÁö ·Ñ¸µ ±âº» ¼¼ÆÃÇϱâ function setRoll(c){ c.coordX1 = 0; c.coordX2 = c.listArea.offsetWidth; c.coordY = c.listArea.offsetHeight; if(c.direction=="right" || c.direction=="down"){ c.coordX2 = c.coordX2 * -1; c.coordY = c.coordY * -1; } c.imageList[c.nextImg].style.display = "block"; setPosition(c); rollOver(c) //c.imageList[c.nextImg].style.left = c.coordX2+"px"; c.rollTimer = setTimeout(function(){imgMove(c)},c.rollTime); }; //À̹ÌÁö¸¦ ¿òÁ÷ÀÌ°Ô ÇÑ´Ù. function imgMove(c){ if(c.direction == "left" || c.direction == "right"){ c.imageList[c.currentImg].style.left = c.coordX1 + "px"; c.imageList[c.nextImg].style.left = c.coordX2 + "px"; }else if(c.direction == "up" || c.direction == "down"){ c.imageList[c.currentImg].style.top = c.coordX1 + "px"; c.imageList[c.nextImg].style.top = c.coordY + "px"; } //alert(c.imageList[c.nextImg].style.left); var moveAt = parseInt(c.moveAt); if (c.direction == "left"){ c.coordX1 -= moveAt; c.coordX2 -= moveAt; }else if(c.direction == "right"){ c.coordX1 += moveAt; c.coordX2 += moveAt; }else if(c.direction=="up"){ c.coordX1 -= moveAt; c.coordY -= moveAt; }else if(c.direction=="down"){ c.coordX1 += moveAt; c.coordY += moveAt; } //if(c.coordX1 < (-1*c.listArea.offsetWidth) ) { if( isNextImgRoll(c) ) { c.currentImg = c.nextImg; c.nextImg += 1; if(c.currentImg == c.imgCnt) c.nextImg = 0; clearTimeout(c.moveTimer); clearTimeout(c.rollTimer); setRoll(c); return; } c.moveTimer = setTimeout(function(){imgMove(c)},c.moveTime); }; //´ÙÀ½ À̹ÌÁö ·Ñ¸µ ÇؾßÇÏ´ÂÁö È®ÀÎ function isNextImgRoll(c){ var d = c.direction; if(d=="left" && c.coordX2 < 0 ) return true; else if(d=="right" && c.coordX2 > 0) return true; else if(d=="up" && c.coordY < 0 ) return true; else if(d=="down" && c.coordY > 0) return true; return false }; //·Ñ¸µ ¹æÇâ¿¡ µû¸¥ µÎ¹ø° À̹ÌÁö À§Ä¡ ÁÂÇ¥ ¼³Á¤ function setPosition(c){ var d = c.direction; if(d=="left") c.imageList[c.nextImg].style.left = c.listArea.offsetWidth+"px"; else if(d=="right") c.imageList[c.nextImg].style.left = (-1 * c.listArea.offsetWidth) + "px"; else if(d=="up") c.imageList[c.nextImg].style.top = c.listArea.offsetHeight + "px"; else if(d=="down") c.imageList[c.nextImg].style.top = (-1 * c.listArea.offsetHeight) + "px"; //alert(c.imageList[c.nextImg].style.left); }; //onmouseover ½Ã ¿òÁ÷ÀÓ ¸ØÃã function rollPause(c){ //alert(c.listArea.onmouseover); c.listArea.onmouseover = function(){ clearTimeout(c.rollTimer); } c.listArea.onmouseout = function(){ //alert("c.listArea.onmouseout"); setRoll(c); } }; //¶óº§°ú ¹ÙÀεå function labelBind(c){ if(c.label == null) return; var labels = c.label.getElementsByTagName(c.labelType); c.label.onmouseover = function(){ for(n in labels){ if(labels[n] == event.srcElement){ //c.imageList[c.currentImg].style.display = "none"; c.currentImg = parseInt(n); c.nextImg = parseInt(n)+1; if(c.currentImg == c.imgCnt) c.nextImg = 0; clearTimeout(c.rollTimer); viewImg(c); rollOver(c); break; } } //alert(event.srcElement) } c.label.onmouseout = function(){ for(n in labels){ if(labels[n]==event.srcElement){ setRoll(c); break; } } } }; //¶óº§ onmouseover ½Ã Ŭ·¡½º Àû¿ë function rollOver(c){ if(c.label == null) return; var els = c.label.getElementsByTagName(c.labelType); if(c.labelType == "img"){ for(n in els){ if(typeof els[n] == "object"){ if(n == c.currentImg){ els[n].src = els[n].getAttribute("oversrc"); }else{ els[n].src = els[n].getAttribute("outsrc"); } } } }else{ for(n in els){ if(typeof els[n] == "object"){ if(n == c.currentImg){ var ocss = els[n].className; els[n].className = ocss+" "+els[n].getAttribute("overcss"); }else{ els[n].className = els[n].getAttribute("outcss"); } } } } } //¶óº§¿¡¼ ¼±ÅÃµÈ À̹ÌÁö º¸À̱â function viewImg(c){ //alert(c.currentImg); for(n=0; n<c.imgCnt+1; n++) { c.imageList[n].style.display = "none"; } c.imageList[c.currentImg].style.left = "0px"; c.imageList[c.currentImg].style.top = "0px"; c.imageList[c.currentImg].style.display = "block"; };}function debug(t){e("dis").innerHTML = t + "<br>";}//id°ªÀ¸·Î °´Ã¼ ¹Ýȯfunction e(id){ var o = document.getElementById(id); if(typeof o == undefined || o == null) { alert(id+" À̸§À» °¡Áø °´Ã¼°¡ ¾ø½À´Ï´Ù."); return null;} return o;}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body><ul class="ul_label" id="label_2"> <table width="1080"> <tr> <td style="border:1px solid #e1e1e1" width="322" background="images/temp/top_banner1.gif"> <li class="fir" overcss="labelOverClass" outcss="fir"></li></td> <td width="756" rowspan="6"><div class="image_list" id="image_list_2"> <div class="images" style="display:block"><img src="images/temp/google.jpg" /></div> <div class="images"><img src="images/temp/naver.jpg" /></div> <div class="images"><img src="images/temp/yahoo.jpg" /></div> <div class="images"><img src="images/temp/daum.jpg" /></div> <div class="images"><img src="images/temp/nate.jpg" /></div> <div class="images"><img src="images/temp/banner.jpg" /></div></div></td> </tr> <tr> <td style="border:1px solid #e1e1e1" width="272" background="images/temp/top_banner2.gif"><li overcss="labelOverClass1" outcss=""></li></td> </tr> <tr> <td style="border:1px solid #e1e1e1" width="272" background="images/temp/top_banner3.gif"><li overcss="labelOverClass2" outcss=""></li></td> </tr> <tr> <td style="border:1px solid #e1e1e1" width="272" background="images/temp/top_banner4.gif"><li overcss="labelOverClass3" outcss=""></li></td> </tr> <tr> <td style="border:1px solid #e1e1e1" width="272" background="images/temp/top_banner5.gif"><li overcss="labelOverClass4" outcss=""></li></td> </tr> <tr> <td style="border:1px solid #e1e1e1" width="272" background="images/temp/top_banner6.gif"><li overcss="labelOverClass5" outcss=""></li></td> </tr></table></ul><script type="text/javascript"><!--var j2 = { "list_area":"image_list_2", "moveAt":"332", "roll_time":"3000", "move_time":"100", "direction":"up", "label":"label_2", labelType : "li"};new RollImage(j2);//oj1.setRoll();//--></script></body></html>답변 1개
채택된 답변
+20 포인트
8년 전
테이블 태그 에서
맨 앞부분의
순서만 변경하시면 되요
Copy
<table width="1080"> <tr> <td width="756" rowspan="6"><div class="image_list" id="image_list_2"> <div class="images" style="display:block"><img src="images/temp/google.jpg" /></div> <div class="images"><img src="images/temp/naver.jpg" /></div> <div class="images"><img src="images/temp/yahoo.jpg" /></div> <div class="images"><img src="images/temp/daum.jpg" /></div> <div class="images"><img src="images/temp/nate.jpg" /></div> <div class="images"><img src="images/temp/banner.jpg" /></div> </div> <!-- 왼쪽의 div 이건 없어야 될거 같은데요 --> </td> <td style="border:1px solid #e1e1e1" width="322" background="images/temp/top_banner1.gif"> <li class="fir" overcss="labelOverClass" outcss="fir"></li></td> </tr>...그런데.. 중간에 </div> 하나는 삭제하시는게 맞는거 같네요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인