조금 아래에 있는 이전 글에서 문의 드립니당 ㅇ.ㅇ
■■
■■ 2x2 큐브형태에서, 각 사분면 영역마다 마우스 오버하면
■■■
■■■
■■■ 3x3 큐브형태를 나타내는 형식을 질문 드렸는데
아마 이전글에서 참고하고있던 링크글의 내용을 착각하신건지 내부영역에서
1번 슬롯 --> ■■■ 2번 슬롯 ■■■
■□□ □□□
■□□ □□□ 등으로 약간씩은 달랐네요
나머지는 어찌어찌 이전 참조사항등으로 땜빵한 듯 보였는데
※ 어찌어찌 2x2 -> 3x3 까진 구현한 듯 하나 (첫4칸은 일반 구분을 위해 다른 이미지, 내부는 아직 다 고치지 못해서 일단 샘플째로 있는 상태고 교체용 이미지로 고치지 못한 상태입니다.)
1번과 2번 (상단의 두칸) 슬롯에 마우스를 롤오버 했을때 저런식으로 내부 3x3영역 하단에 다시 나타나는 경우가 발생해서 다시 문의드립니다.
몇번 마우스 움직여 건드리면 사라지나, 돌아가며 1번슬롯과 2번 슬롯에서 나타나네요....
[ HTML 전문 올리겠습니다 ]
<div data-inven-id="main" style="display:block;"><table cellpadding="0">
<tbody>
<tr>
<td><div style="display:inline-block; width:225px; height:225px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2019/02/19/bbs/i13606915524.jpg" width="100%"></div></td>
<td><div style="display:inline-block; width:225px; height:225px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2019/02/19/bbs/i13824150978.jpg" width="100%"></div></td>
</tr>
<tr>
<td><div style="display:inline-block; width:225px; height:225px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2019/02/19/bbs/i13899325814.jpg" width="100%"></div></td>
<td><div style="display:inline-block; width:225px; height:225px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2019/02/19/bbs/i13847802246.jpg" width="100%"></div></td>
</tr>
</tbody></table></div>
<div data-inven-id="t1" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13150800474.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179950001.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i16267489971.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14402922382.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td></tr></tbody></table></div>
<div data-inven-id="t2" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13150800474.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179950001.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i16267489971.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14402922382.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td></tr></tbody></table></div>
<div data-inven-id="t3" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13150800474.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179950001.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i16267489971.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14402922382.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td></tr></tbody></table></div>
<div data-inven-id="t4" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t1':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t2':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t3':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t4':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t5':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13150800474.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t6':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i13179950001.jpg"></div></td></tr><tr><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t7':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i16267489971.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t8':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14402922382.jpg"></div></td><td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-over-css="{'main':{'display':'none'},'t9':{'display':'block'}}"><img src="https://optimal.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td></tr></tbody></table></div>
요약 :
첫 부분은 답글을 통해 받은 2x2 부분 (해당 장소에 이미지 주소 4군데는 바꾼 상태)
그 이후로
오버와 관련된 부분 (이부분은 잘 모르겠습니다) 은 그대로 이용,
내부 3x3부분을 만들기 위해 유지한 부분 이외의--> 속의 칸을 나타내는 부분은
http://www.inven.co.kr/board/webzine/4712/1597?iskin=webzine 게시물의
첫 3x3 나타내는 부분을 다시 인용해서 내부 틀을 채워봤는데 어디가 문제인지 위에 질문 드린것처럼
1, 2 번 슬롯에서는 하단에 같은 내용이 다시 나타나는 경우가 생기더라구요...
말과 글과 조악한 그림으로 설명하려하니 많이 어렵네요.
원인이라도 알면 어떻게 손대볼텐데 이쪽 지식이 전무하니 많이 어렵습니다 @.@;
설명이 많이 어렵겠다 싶으시면 고정적으로 2x2 -(마우스 오버) -> 전 영역 3x3내부 양식을 주셔도 충분할 듯 합니다.
현재 크기도 다 맞는데 저 두 영역에서 같은내용이 반복으로 나타나는게 문제같아요
미리 감사의 말씀 드립니다 (- -)(_ _)
따링이
따링이
