웹마스터 팁

오늘 인터넷(전자컴공 2학년전공)과목 시험 문제입니다..이제 다 끝났군요..
첨엔 어떻게 할까 당황했는데..겨우 풀었답니다..(1등으로 풀었답니다~~~)
자바스크립트 부분에서는 다른곳의 소스를 참고좀 해서 만들었습니다.

바로가기  http://banner24.x-y.net/lec/card.html
-----------------------------------------------------------------------------


★ 문제는 6 * 5 의 총 30개의 칸에서 각 카드들은 랜덤하게 나오며, 하나를 선택하고 나머지 하나를 선택했을시 2개가 똑같으면 카드를 뽑아올수 있다.그리고 2개가 다르면 다시 원래대로 돌아간다.

자 이제 소스를 들쳐봅시다..~~

<SCRIPT LANGUAGE="JavaScript">
N=(document.all)?0:1;
var X,Y,pp

function m(jj,x,y){
if (N){jj.moveTo(x,y)}
else {jj.pixelLeft=x;jj.pixelTop=y}
}

function g(e){
if(N){var bb;var cX=e.pageX;var cY=e.pageY;
        for (var i=document.layers.length-1;i>=0;i--){bb=document.layers[i];
        if ((cX>bb.left)&&(cX<bb.left+bb.clip.width)&&(cY>bb.top)&&(cY<bb.top+bb.clip.height)){pp=bb;return;}
        }
}
else {var imgj = window.event.srcElement;pp = imgj.parentElement.style;return;}
}
function MM(e){
        if (pp) {if (document.layers) {m(pp,(e.pageX-X),(e.pageY-Y));}
else {m(pp,(window.event.clientX-X+document.body.scrollLeft-2),(window.event.clientY-Y+document.body.scrollTop-1));

        return false;}
        }
}
track="off"

function MD(e){
if (chk=="off")track="off"
if (chk=="on"){
if (track=="on"){
g(e);
if (pp){if (N) {X=e.pageX-pp.left;Y=e.pageY-pp.top;}
        else {X=window.event.offsetX;Y=window.event.offsetY;}
        }
return false;
}
}
}


function MU(){
pp=null;
document.focus();
}
if (N){ document.captureEvents (Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}
document.onmousedown=MD;
document.onmousemove=MM;
document.onmouseup=MU

function trackOff(){
if (N)document.releaseEvents(Event.MOUSEDOWN)
track="off"
}
chk="on"

function ch(cx){
chk=cx
}

function trackOn(){
track="on"
if (chk=="on"){
if (N)document.captureEvents(Event.MOUSEDOWN)
}
}

var j,k

function randomPlacement(){
deck= new Array(30)
hold= new Array(30)
W= new Array(12,77,142,207,272,337,402,467,532,597)
vert=0
var ab = 29
while (ab > -1){
        var x = Math.random()
        x = new String (x)
        x = x.substring(x.length -5)
        x = Math.round(x*.30/1000)
        if (x == 30) x = 0

if (hold[x] == 100) ab+=1
        else if (hold[x] != 100) deck[ab] = x
hold[x] = 100
ab -=1
}

T=12
ab=0
while (ab<30){

        if (N){
        eval("document.d"+deck[ab]+".top="+T)
        eval("document.d"+deck[ab]+".left="+W[vert])
        }
else
        {
        eval("d"+deck[ab]+".style.pixelTop="+T)
        eval("d"+deck[ab]+".style.pixelLeft="+W[vert])
        }
vert+=1
if (vert==6){vert=0;T+=90}
ab+=1
}
}
card=0

function hideIt(a){
trackOff();
chk="off"
card+=1
        if (card==1){
        s1=a;
        k=deck[a]%10;
        }
if (N) eval("document.c"+a+".zIndex=1");
else eval("c"+a+".style.zIndex=1");
        if (card==2) {

                j=deck[a]%10;
                card=0;
                s2=a
                if (k==j){
                chk="on"
                trackOn();
        if (N) {eval("document.c"+s1+".top=(-100)"); eval("document.c"+s2+".top=(-100)");}
        else {eval("c"+s1+".style.pixelTop=(-100)");eval("c"+s2+".style.pixelTop=(-100)");}
        }
                else{        aa=setTimeout("serenaBack(s1)",300)
                bb=setTimeout("serenaBack(s2)",300)
                chk="off"
                }
        }
}

function serenaBack(b){
if (N) eval("document.c"+b+".zIndex=3");
else eval("c"+b+".style.zIndex=3");
}

// the following allows for a Netscape check, not currently required
function checkit(){
//if (N)
//document.t2.document.write(chk)
//document.t2.document.close()
//setTimeout("checkit()",30)
}
//checkit();
</SCRIPT>
</HEAD>


<BODY onload="randomPlacement();" bgcolor=c0c0c0>
<!--가로 1번째줄-->

<div id="c0" style="position:absolute;left:10;top:10;z-index:3;"><A HREF="javascript:hideIt(0);" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c1" style="position:absolute;left:75;top:10;z-index:3;"><A HREF="javascript:hideIt(1)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c2" style="position:absolute;left:140;top:10;z-index:3;"><A HREF="javascript:hideIt(2)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c3" style="position:absolute;left:205;top:10;z-index:3;"><A HREF="javascript:hideIt(3)" onMouseOver="ch('off');window.status=''+ ';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c4" style="position:absolute;left:270;top:10;z-index:3;"><A HREF="javascript:hideIt(4)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c5" style="position:absolute;left:335;top:10;z-index:3;"><A HREF="javascript:hideIt(5)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>

<!--가로 2번째 줄-->

<div id="c6" style="position:absolute;left:10;top:100;z-index:3;"><A HREF="javascript:hideIt(6)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c7" style="position:absolute;left:75;top:100;z-index:3;"><A HREF="javascript:hideIt(7)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c8" style="position:absolute;left:140;top:100;z-index:3;"><A HREF="javascript:hideIt(8)" onMouseOver="ch('off'+ ');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c9" style="position:absolute;left:205;top:100;z-index:3;"><A HREF="javascript:hideIt(9)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c10" style="position:absolute;left:270;top:100;z-index:3;"><A HREF="javascript:hideIt(10)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c11" style="position:absolute;left:335;top:100;z-index:3;"><A HREF="javascript:hideIt(11)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>


<!--name에 따라서 d*의 레이어를 나타낸다 -->


<div id="d0" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jc.gif" WIDTH="61" HEIGHT="78" border=0 name='p0'></a></div>
<div id="d1" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jd.gif" WIDTH="61" HEIGHT="78" border=0 name='p1'></a></div>
<div id="d2" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jh.gif" WIDTH="61" HEIGHT="78" border=0 name='p2'></a></div>
<div id="d3" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="js.gif" WIDTH="61" HEIGHT="78" border=0 name='p3'></a></div>
<div id="d4" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qc.gif" WIDTH="61" HEIGHT="78" border=0 name='p4'></a></div>
<div id="d5" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qd.gif" WIDTH="61" HEIGHT="78" border=0 name='p5'></a></div>
<div id="d6" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qh.gif" WIDTH="61" HEIGHT="78" border=0 name='p6'></a></div>
<div id="d7" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qs.gif" WIDTH="61" HEIGHT="78" border=0 name='p7'></a></div>
<div id="d8" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kc.gif" WIDTH="61" HEIGHT="78" border=0 name='p8'></a></div>
<div id="d9" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kd.gif" WIDTH="61" HEIGHT="78" border=0 name='p9'></a></div>
<div id="d10" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kk.gif" WIDTH="61" HEIGHT="78" border=0 name='p10'></a></div>
<div id="d11" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kl.gif" WIDTH="61" HEIGHT="78" border=0 name='p11'></a></div>
<div id="d12" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="km.gif" WIDTH="61" HEIGHT="78" border=0 name='p12'></a></div>
<div id="d13" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="ke.gif" WIDTH="61" HEIGHT="78" border=0 name='p13'></a></div>
<div id="d14" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="ku.gif" WIDTH="61" HEIGHT="78" border=0 name='p14'></a></div>

<!--다시 가로 3번째 줄 부터--->

<div id="c12" style="position:absolute;left:10;top:190;z-index:3;"><A HREF="javascript:hideIt(12)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c13" style="position:absolute;left:75;top:190;z-index:3;"><A HREF="javascript:hideIt(13)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c14" style="position:absolute;left:140;top:190;z-index:3;"><A HREF="javascript:hideIt(14)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c15" style="position:absolute;left:205;top:190;z-index:3;"><A HREF="javascript:hideIt(15)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c16" style="position:absolute;left:270;top:190;z-index:3;"><A HREF="javascript:hideIt(16)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c17" style="position:absolute;left:335;top:190;z-index:3;"><A HREF="javascript:hideIt(17)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>

<!--다시 가로 4번째 줄--->


<div id="c18" style="position:absolute;left:10;top:280;z-index:3;"><A HREF="javascript:hideIt(18)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c19" style="position:absolute;left:75;top:280;z-index:3;"><A HREF="javascript:hideIt(19)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on'+ ')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c20" style="position:absolute;left:140;top:280;z-index:3;"><A HREF="javascript:hideIt(20)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c21" style="position:absolute;left:205;top:280;z-index:3;"><A HREF="javascript:hideIt(21)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c22" style="position:absolute;left:270;top:280;z-index:3;"><A HREF="javascript:hideIt(22)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c23" style="position:absolute;left:335;top:280;z-index:3;"><A HREF="javascript:hideIt(23)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>


<!--다시 가로 5번째 줄--->


<div id="c24" style="position:absolute;left:10;top:370;z-index:3;"><A HREF="javascript:hideIt(24)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c25" style="position:absolute;left:75;top:370;z-index:3;"><A HREF="javascript:hideIt(25)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c26" style="position:absolute;left:140;top:370;z-index:3;"><A HREF="javascript:hideIt(26)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c27" style="position:absolute;left:205;top:370;z-index:3;"><A HREF="javascript:hideIt(27)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c28" style="position:absolute;left:270;top:370;z-index:3;"><A HREF="javascript:hideIt(28)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>
<div id="c29" style="position:absolute;left:335;top:370;z-index:3;"><A HREF="javascript:hideIt(29)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')"><IMG SRC="none.gif" WIDTH="61" HEIGHT="78" border=0></a></div>



<!--레이거 각 10개씩 잡아준다~~ㅜ,,ㅜ 시험 언제 끝내노.-->

<div id="d15" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jc.gif" WIDTH="61" HEIGHT="78" border=0 name='p15'></a></div>
<div id="d16" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jd.gif" WIDTH="61" HEIGHT="78" border=0 name='p16'></a></div>
<div id="d17" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="jh.gif" WIDTH="61" HEIGHT="78" border=0 name='p17'></a></div>
<div id="d18" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="js.gif" WIDTH="61" HEIGHT="78" border=0 name='p18'></a></div>
<div id="d19" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qc.gif" WIDTH="61" HEIGHT="78" border=0 name='p19'></a></div>
<div id="d20" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qd.gif" WIDTH="61" HEIGHT="78" border=0 name='p20'></a></div>
<div id="d21" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qh.gif" WIDTH="61" HEIGHT="78" border=0 name='p21'></a></div>
<div id="d22" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="qs.gif" WIDTH="61" HEIGHT="78" border=0 name='p22'></a></div>
<div id="d23" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kc.gif" WIDTH="61" HEIGHT="78" border=0 name='p23'></a></div>
<div id="d24" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kd.gif" WIDTH="61" HEIGHT="78" border=0 name='p24'></a></div>
<div id="d25" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kk.gif" WIDTH="61" HEIGHT="78" border=0 name='p25'></a></div>
<div id="d26" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="kl.gif" WIDTH="61" HEIGHT="78" border=0 name='p26'></a></div>
<div id="d27" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="km.gif" WIDTH="61" HEIGHT="78" border=0 name='p27'></a></div>
<div id="d28" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="ke.gif" WIDTH="61" HEIGHT="78" border=0 name='p28'></a></div>
<div id="d29" style="position:absolute;left:5;top:-130;z-index:2;"><IMG SRC="ku.gif" WIDTH="61" HEIGHT="78" border=0 name='p29'></a></div>






<div id="text" style="position:absolute;left:350;top:5;z-index:2;"><A HREF="javascript:hideIt(29)" onMouseOver="ch('off');window.status='';return true" onMouseOut="ch('on')">


자 보시면 모르시겠죠? 그럼 링크된곳으로 출발..~~~~조금 에러가 뜰수도 있습니다..
하지만 잘 체크해보세요~~~
제목 글쓴이 날짜
Include 변수 담기 니오티 2011.05.03
사이트 url에 자꾸 index.php 가 붙어다닐때 [7] file 마시멜 2011.05.01
nginx 에서 XE rewrite 모듈 설정하기 [1] file ezi 2011.05.01
페이지수정이 안될때 [2] gob4deng2 2011.04.30
제로보드에 네이버 실시간 뉴스 넣을 수 있나요? 서현보 2011.04.29
페이스북 정통 '소셜댓글'이나 'send' 버튼 적용 애드온 제작 부탁드려요! hellosamyoo 2011.04.29
관리자페이지 회원목록을 일반페이지에서 사용하기(수정) [4] file 늘푸른이 2011.04.27
이유는 모르겠는데 뷰테이블을 쓰면 XE의 속도가 크게 떨어지는 것 같습니다. [2] 철갑 2011.04.25
1.4.5.5 첨부파일 문제입니다 [4] file codochi 2011.04.23
버젼 1.4.5.5 업그레이드후에 음악올리면 안뜨기에 여기 와서 다시 해보는 것입니다. [20] file 유샤인 2011.04.22
eAccelerator와의 호환성 문제 [2] 7시내고향 2011.04.22
모듈 선택기에서 선택이 안되는 문제해결. 모글리만세 2011.04.22
구글검색 색인 잘되는 확실한 효과. 레이아웃 스킨 제작시 참고하기면 좋습니다. [8] NetCabin 2011.04.21
XE 업데이트 이후 로그인 에러 및 첨부파일 증발에 대한 해결 팁 모음 [5] ksdwm72 2011.04.20
cafe24 호스팅시 XE 쉬운설치가 안될때 해결방법 ^^(ftp 설정 item) [2] 연금술사™ 2011.04.19
QRCode 이미지를 줄여서 깔끔하게사용하는 법~ [2] 포토올/wow 2011.04.18
XE 홈피에 예쁜 음악BGM 넣는 방법(프레임 분리형 플래시BGM) 푸른커튼2 2011.04.18
(1.4.5 버전 이상) XE가 설치된 사이트 찾기 [1] SMaker 2011.04.17
다솜플레이어창은 뜨는데 연결중에서 더이상 안넘어가요 탱7 2011.04.15
댓글 쪽지 알림시 원본글 URL 설정 [1] unnumiya 2011.04.15