이미지 주소만을 복사-붙여넣기하여 사용할 수 있는 인장 틀을 하나 소개하려 합니다.

이미지를 총 12개 넣을 수 있는 액자형 인장틀인데요,

우선 밑에는 제 인장에 장착된 예시입니다.


(17.12.13 16:44 수정)

모바일은 PC모드에서 정상작동 합니다.

 



 




 


이미지는 왼쪽 6개, 오른쪽 6개 총 12개가 사용되며

측면에 있는 이미지에 마우스를 올릴 경우

중앙 프레임 부분의 큰 이미지가 미끄러지며 해당 이미지로 변화합니다.



중앙 이미지의 규격은 300 X 300 (픽셀) 이므로

1:1 비율의 이미지를 사용하시면 됩니다.

(1:1 비율이 아니더라도 자동으로 300 X 300 크기로 맞춰집니다)




사용법은 아주 간단합니다.

이미지 주소가 들어갈 부분은

●●●이미지1●●● ~ ●●●이미지12●●●

이렇게 변환되어 있으며

해당 부분을 이미지 주소로 바꿔주시면 됩니다


예시)

<img src="●●●이미지1●●●" style="

이 부분을

<img src="https://upload2.inven.co.kr/upload/2017/12/12/bbs/i14339804830.png" style="

이런 식으로 바꿔줍니다.



이미지마다 두 번씩 쓰여있으므로,

이미지 1개당 2곳씩

총 24곳을 바꿔주시면 됩니다.


메모장으로 복사-붙여넣기 하셔서 

Ctrl+H (찾아 바꾸기)를 통해 바꾸시면 수월합니다.







(아래 박스의 전체 부분을 복사하여 사용하면 되고, 파일로도 첨부하였습니다.)

<center>
<div style="display:block; width:411px; height: 302px; padding:2px 1px 1px 1px; background:none; overflow:hidden;" align="center">

<!-- 전체 프레임 -->
<div style="display: inline-block; width:405px; height:300px; margin: 0px; overflow:hidden;" align="left">

<!-- 왼쪽 프레임 -->
<div style="display:inline-block; width:50px; height:300px; margin-right:-2px; overflow: hidden;">

<img src="●●●이미지1●●●" style="display:block; background:white; margin: 0px -4px 1px 0px; width: 49px; height:50px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'0', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지2●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-300', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지3●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-600', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지4●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-900', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지5●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-1200', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지6●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-1500', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

</div>
<!-- 왼쪽 프레임 끝 -->

<!-- 중앙 프레임 -->
<div style="display:inline-block; width: 300px; height: 300px; margin-right:-1px; overflow: hidden;">
<div style="width: 600px; height:1800px; transition:0.3s ease-in-out;" data-inven-id="frame">

<div style="display:inline-block; width:300px; height: 1800px; margin-right:-4px;">
<img src="●●●이미지1●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
<img src="●●●이미지2●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
<img src="●●●이미지3●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
<img src="●●●이미지4●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
<img src="●●●이미지5●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
<img src="●●●이미지6●●●" style="display:block; margin-right:-4px; width: 300px; height:300px;">
</div>

<div style="display:inline-block; width:300px; height: 1800px;">
<img src="●●●이미지7●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
<img src="●●●이미지8●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
<img src="●●●이미지9●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
<img src="●●●이미지10●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
<img src="●●●이미지11●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
<img src="●●●이미지12●●●" style="display:block; margin-right:0px; width: 300px; height:300px;">
</div>

</div>
</div>
<!-- 중앙 프레임 끝 -->

<!-- 오른쪽 프레임 -->
<div style="display:inline-block; width:50px; height:300px; margin-right:-1px; overflow: hidden;">

<img src="●●●이미지7●●●" style="display:block; background:white; margin: 0px -4px 1px 0px; width: 49px; height:50px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'0', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지8●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-300', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지9●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-600', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지10●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-900', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지11●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-1200', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">
<img src="●●●이미지12●●●" style="display:block; background:white; margin: 1px -4px 1px 0px; width: 49px; height:49px; opacity:0.8;" 
data-inven-over-css="{'frame':{'margin-top':'-1500', 'margin-left':'-300'}, '_SELF_':{'opacity':'1'}}" data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

</div>
<!-- 오른쪽 프레임 끝 -->

</div>
<!-- 전체 프레임 끝 -->

</div>
</center>








전체 규격은 411 X 302 (픽셀) 이므로

인장의 한켠에 따로 넣어 사용하실 경우

그 이상의 공간을 확보해주셔야 합니다.




* 스크립트 내의 사이즈를 하나라도 변경하신다면

원하지 않는 결과를 얻을 수도 있으니 주의하시기 바랍니다.




+ 추가 옵션 1

맨 윗부분 오른쪽의 

background:none;

이 부분을

background:black;

이렇게 바꿀 경우,

예시와 같은 검은 배경을 사용할 수 있습니다.


+ 추가 옵션 2

좌우에 있는 작은 이미지가 반투명한 것이 맘에 들지 않으시다면

Ctrl+H (찾아 바꾸기)로 

0.8 을 1.0 으로 모두 바꿀 경우,

불투명하게 변경 가능합니다.