무딱
2017-01-29 19:00
조회: 714
추천: 0
몇가지 개선사항에 대한 내용입니다.1. 최상단 4개의 탭 관리를 더 깔끔하게 개선해보았습니다. 기존 12개의 이미지를 사용하여 탭을 바꿀때마다 여러개의 사진이 바뀌도록 하였는데, 하나로 합쳐서 총 4개의 이미지를 사용하여 구성될 수 있도록 수정하였습니다. <div data-inven-id="tab_1" .... 아래 <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14366918788.jpg" usemap="#top_1"> <map name="top_1"> <area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}"> </map> <div data-inven-id="tab_2" .... 아래 <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14393595811.jpg" usemap="#top_2"> <map name="top_2"> <area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}"> </map> 이 이하는 복붙하시면 됩니다. <!-- 검색 탭 자유롭게 활용하셔도 됩니다 --> <div data-inven-id="tab_3" style="display:none; border: 0px; width: 450px; padding: 0em;"> <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14319622424.jpg" usemap="#top_3"> <map name="top_3"> <area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}"> </map> <img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i13330776144.jpg"> <img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i14171626620.jpg"> </div> <!-- 설정 탭 자유롭게 활용하셔도 됩니다 --> <div data-inven-id="tab_4" style="display:none; border: 0px; width: 450px; padding: 0em;"> <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14347464907.jpg" usemap="#top_4"> <map name="top_4"> <area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}"> <area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;" data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}"> </map> <img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i13979827323.jpg"></div> </div> 추가적인 이해를 돕기 위해 현재 상태의 script 를 첨부해드리겠습니다. * 움짤은 450*540으로 맞춰주세요. (포토샵 등으로 편집) <div data-inven-id="ext_con1_twicenayeon" style="display:none;"> <a data-inven-random="nayeon_1,nayeon_2,nayeon_3"></a> <div data-inven-id="nayeon_1" style="display:none; width:450px; height:800px; background:url( <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div> <div data-inven-id="nayeon_2" style="display:none; width:450px; height:800px; background:url( <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div> <div data-inven-id="nayeon_3" style="display:none; width:450px; height:800px; background:url( <img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div> <map name="ext_con1_nayeon"> <area shape="rect" coords="4,35,47,79" title="backtomain" data-inven-click-css="{'ext_con1_twicenayeon':{'display':'none'},'main_kakao':{'display':'block'}}"></map></div> 시작과 끝의 div 박스는 유지한 채로, <a data-inven-random> 을 사용하여 랜덤으로 이탤릭+취소줄이 그어진 주소의 움짤을 링크할 수 있도록 해두었습니다. 초록색끼리는 코드가 같아야하며, 여러 움짤을 사용할 경우 빨간색 글씨를 수정하면 됩니다. |