항상 다양한 형태로 인장을 만들어보려고 노력하는 무딱입니다 =)

이번에는 심플하지만 꽤나 매력있는 3X3 마우스오버 인장틀을 소개합니다.

기본 기능은 마우스를 올리면 화면이 전환되면서 부가 설명이나 사진 등을 게시할 수 있도록 만들었습니다.

먼저 직접 마우스를 올려서 체험해보세요.

-----------------------------------------------------------------------
-----------------------------------------------------------------------
위의 인장같은 경우, 총 30장의 사진이 사용되었으며, 나는 굳이 복잡하게 안쓰겠다 하시는분들은
9장으로도 충분히 효과를 낼 수 있습니다.

마우스를 올릴때만 움짤이 움직이는 것은 일종의 트릭이며, 기본페이지에 움짤의 첫 화면을 jpg 형태로 올려놓고
마우스를 올렸을때 움짤 페이지가 나타나도록 했습니다. (재생이 되었다 안되었다 하는 것처럼 보이기 위해 말이죠)

기본적으로는 첫 페이지에서 각각 9개의 칸에 마우스를 올릴 경우 특정 div 가 생겨나서 마치 표가 바뀌는 것 처럼
속이는 효과를 가지고 있습니다. 표가 자유자재로 변신하는 것 처럼 보이기 때문에 꽤나 매력적이지 않을까 생각해봤습니다.

기본적인 스크립트로는 표를 자유자재로 변형할 수가 없어서 어쩔 수 없이 총 10개의 div 틀을 가지고 조작합니다. 스크립트 내용이 약간 조잡해보일 수는 있으나, 시각적 효과가 뛰어나므로 충분한 가치가 있다고 봅니다.


혹시나 위 인장을 그대로 사용하고 싶으신 분들도 있을 수 있기에 위 인장에 사용된 스크립트를 올려드리겠습니다.
<div data-inven-id="main" style="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://upload2.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://upload2.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://upload2.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://upload2.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://upload2.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://upload2.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://upload2.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://upload2.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://upload2.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></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="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t1':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16409621031.gif"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td>
</tr>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td>
<td colspan="2" rowspan="2"><div style="width:302px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13906905697.jpg"></div></td>
</tr>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16267489971.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="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t2':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16478598984.gif"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><div style="width:454px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13939816852.jpg"></div></td>
</tr>
<tr></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="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13120348196.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t3':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16447866748.gif"></div></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><div style="width:302px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13971957245.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.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;"><img src="https://upload2.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="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td>
<td colspan="2" rowspan="3"><div style="width:302px; height:454px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13902443537.jpg"></div></td>
</tr>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t4':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16411794320.gif"></div></td>
</tr>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16267489971.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
<div data-inven-id="t5" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td colspan="2"><div style="width:302px; height:150px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13933814224.jpg"></div></td>
<td rowspan="2"><div style="width:150px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13963307861.jpg"></div></td>
</tr>
<tr>
<td rowspan="2"><div style="width:150px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13993883879.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t5':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16492426795.gif"></div></td>
</tr>
<tr>
<td colspan="2"><div style="width:302px; height:150px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13923545638.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
<div data-inven-id="t6" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td colspan="2" rowspan="3"><div style="width:302px; height:454px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13954954086.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td>
</tr>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t6':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16490977354.gif"></div></td>
</tr>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
<div data-inven-id="t7" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14714214356.jpg"></div></td>
<td colspan="2" rowspan="2"><div style="width:302px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13985197864.jpg"></div></td>
</tr>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13109293221.jpg"></div></td>
</tr>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;" data-inven-out-css="{'t7':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i16494328348.gif"></div></td>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.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;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
<div data-inven-id="t8" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td colspan="3" rowspan="2"><div style="width:454px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13915393105.jpg"></div></td>
</tr>
<tr></tr>
<tr>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.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-out-css="{'t8':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14653818931.gif"></div></td>
<td><div style="display:inline-block; width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14428593169.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
<div data-inven-id="t9" style="display:none;" data-inven-out-css="{'_SELF_':{'display':'none'},'main':{'display':'block'}}">
<table cellpadding="0">
<tbody>
<tr>
<td colspan="2" rowspan="2"><div style="width:302px; height:302px; padding:0px; margin:0px; background-color:#999;"><img src="https://upload2.inven.co.kr/upload/2017/01/30/bbs/i13945601216.jpg"></div></td>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i13179276430.jpg"></div></td>
</tr>
<tr>
<td><div style="width:150px; height:150px; padding:0px; margin:0px;"><img src="https://upload2.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;"><img src="https://upload2.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;"><img src="https://upload2.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-out-css="{'t9':{'display':'none'},'main':{'display':'block'}}"><img src="https://upload2.inven.co.kr/upload/2017/01/29/bbs/i14605220301.gif"></div></td>
</tr>
</tbody>
</table>
</div>


기본적으로 스크립트 내용은 첨부파일에 해놓았으며,

바꿔야 할 모든 부분은 **내용 주소** 이런식으로 바꿔놓았습니다.

* 이미지 참고사항입니다.
모든 정사각형 이미지는 150* 150px
2칸에 걸쳐져있는 가로/세로 길이는 302px
3칸에 걸쳐져있는 가로/세로 길이는 454px 입니다.

즉, 2*3 이미지를 제작하실 때에는 302*454px 이미지를 제작하시면 됩니다.
(사이즈는 td 부분에 width, height 로 명시해두었습니다.)


* 최대한 간단하게 구성해보려고 했으니 많은 이용 바랍니다 =)

* 혹시 해당 칸에 마우스를 올렸을 때 나오는 큰 사이즈의 표 크기를 변경하고 싶으신 경우, 


이 링크로 와서 한번씩 읽어주세요.

건의사항이나 질문은 댓글로 하셔도 좋으나, 급하게 확인이 필요한 경우에는 쪽지로 문의 부탁드립니다.