웹마스터 팁

오늘 인터넷(전자컴공 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')">


자 보시면 모르시겠죠? 그럼 링크된곳으로 출발..~~~~조금 에러가 뜰수도 있습니다..
하지만 잘 체크해보세요~~~