-인장접는법-


아래에 
빨간색 두꺼운 글씨체로 바꾼 부분을 잘 살펴보시면 이해가 되실겁니다.

이게 인장을 접는 "HTML" 입니다

<DIV style="TEXT-ALIGN: strong; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">
<IMG border=0 src="보여줄그림주소"><P></P>
</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in>
<IMG border=0 src="클릭하면 보이는그림주소1"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소2"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소3"><P></P></DIV>

보여줄 그림주소는 말 그대로 클릭가능한 그림입니다. 

클릭하면 보이는그림은 클릭하면 보이는 그림!

"  "  안에 주소 넣으시면됩니다.


일단 쉽게 위 태그를 복사하여 HTML을 눌르시고 붙여넣기합니다.

반드시 HTML을 눌르고 붙여넣기 해야합니다. 안그러면 텍스트로 나옵니다.


일단 쉽게 이미지 하나로 해봅시다.


클릭하면 이런식으로 나옵니다.

-인장 접는법 개수 늘리기-


그리고 인장접는기능을 2개 3개 이상을 하고싶다면

('limuzz_in') 이거를 그냥 바꿔주면됩니다.  ('limuzz_in1') ,  ('limuzz_in2') 이럭식으로

숫자 넣으시면됩니다. 중복만 안되면 가능합니다.

아래처럼요.

<DIV style="TEXT-ALIGN: strong; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">
<IMG border=0 src="보여줄그림주소"><P></P>
</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in>
<IMG border=0 src="클릭하면 보이는그림주소1"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소2"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소3"><P></P></DIV>



 <DIV style="TEXT-ALIGN: strong; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in2').style.display=(document.getElementById('limuzz_in2').style.display=='none')?'block':'none';">
<IMG border=0 src="보여줄그림주소"><P></P>
</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in2>
<IMG border=0 src="클릭하면 보이는그림주소1"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소2"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소3"><P></P></DIV>


 <DIV style="TEXT-ALIGN: strong; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in3').style.display=(document.getElementById('limuzz_in3').style.display=='none')?'block':'none';">
<IMG border=0 src="보여줄그림주소"><P></P>
</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in3>
<IMG border=0 src="클릭하면 보이는그림주소1"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소2"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소3"><P></P></DIV>


-클릭하면 보이는 그림주소 늘리는법-

<DIV style="TEXT-ALIGN: strong; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">
<IMG border=0 src="보여줄그림주소"><P></P>
</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id=limuzz_in>
<IMG border=0 src="클릭하면 보이는그림주소1"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소2"><P></P>
<IMG border=0 src="클릭하면 보이는그림주소3"><P></P>
<IMG border=0 src="추가 이미지"><P></P>
<IMG border=0 src="추가 이미지"><P></P></DIV>

이런식으로 해주시면됩니다.

인장접는태그 <IMG border=0 src="추가 이미지"><P></P> 를 <DIV> 안에 넣으시면 됩니다. 

혹시나 줄이고싶다면 <IMG border=0 src="클릭하면 보이는그림주소"><P></P> 지우면됩니다.

-프로필설정-


인벤마다 이런곳 있습니다. 



이거 보고도 이해 안되시면 연습이짱입니다.

지금 인장에있는 HTML 복사 하셔서 메모장에 저장해두시고

연승하시면 빨리 마스터 하실수잇습니다.


- HTML로 간단하게 인장 꾸미는법 - 

저도 인벤하다가 배운거라서요.

인장접는방법 말고 다른거 알려드릴께요.


1. 하이퍼링크


↓ 이거는 하이퍼 링크에요. 
<a href="사이트주소"> <img src="이미지링크" border="0"> </a>

인장이 접기에는 너무 많을때 이미지 게시판에 받은 인장들 올리고 하이퍼 링크 걸어주면

바로 게시글로 갈수있어요.

( 제 인장처럼요 ) 

그리고

글자로 하는방법도있는데 이건 어차피 이미지추가 옆에 "링크추가" 있어서 딱히 알아도

인베에서는 쓸모없어요.

<a href="사이트주소" target="_blank"> <font color="0000cc">글씨넣는곳</font> </a>

-----

2 . 이미지 문자 넣기

<img src="이미지링크" alt="글자넣는곳">

인벤에서 될지는 모르겠지만 이미지에 커서를 두면 "글자넣는곳" 이라는 글씨가 나옵니다.

블로그 하시는분들 쓰시면 좋을꺼같아요.

alt=" "  이 안에 쓰고싶은거 쓰면됨


3. 인장검색기

↓인장검색기 html태그

<form onsubmit="window.open('http://www.inven.co.kr/member/inventory/view_inventory.php?nick=' +encodeURIComponent(this.sNickName.value),'w'+((new Date()).getTime()), 'width=600,height=500, scrollbars=yes, resizable=yes');return false;" name="characterInfo" style="text-align: left;">인장 : <input style="FONT-SIZE: 1em" name="sNickName"><input style="FONT-SIZE: 1em" value="검색" type="submit"></form>


4. 스크롤바 

어떤분들 간혹보면 스크롤바 처럼되있는 인장 보신적이 있을꺼에요. ( 못본분들도있을수도있지만요 )

HEIGHT : 이거는 높이를 설정할수있어요 ( 단위 : 픽셀 )

<div style="OVERFLOW-X: hidden; OVERFLOW-Y: auto; HEIGHT: 400px">
<div><b>

내용

<div><br />
</div></div>
</div>


원본 크기로 보시려면 그림을 클릭하세요.

스크롤바 적용된 모습

위에 태그 넣으시고 스페이스바 연속적으로 눌러보시면 인벤토리에서 스크롤바가 생길꺼에요.

그리고 내용이라고 써진곳에 넣으면됩니다. 글자라든지 이미지라던지 움짤이라던지


---------

거듭말하지면 연습이 중요합니다.