제 블로그에 필요한 것들은 자작해서 만들어서 쓰고 있어서 아쉬움이 없지만..
어제 꼬이님의 이야기를 듣고 음..그럴수도 있겠구나 해서 만들어본것 공유해봅니다.
제 블로그에 달고 이쁘게 정리정돈을 하면 좋겠지만 귀차니즘...하하
잘하시는 분들 보단 못하시는 분들과 하고는 싶지만 하실수 없는 분들과 공유합니다.
맘에 쏘옥 들어서 공유하는것 아니에요.이것 조차도..라는 생각에...하하
담부터 간단한거라도 공유하도록 하겠숨다.잘될지 모르겠지만..ㅎㅎ
기본적인 태그를 어느정도 알고 계시면 블로그 운영하시기에 좀더 편안하실겁니다.
웹에디터가 티스토리도 그렇고 게시판에 장착이 되어있어서 태그를 몰라도 기본적인것들이 구현이 되어서
더욱더 태그코드와는 거리가 멀어지는 것도 원인이 있겠죠.
여튼 본인들의 블로그를 조금이라도 꾸밀려면 태그 코드를 알아야 하지만 그냥 생긴대로 글(포스팅)만 한다면
굳이 알필요는 없습니다.하하.
만들어 놓은 이미지 아이콘을 한번 올려서 봐야겠네요.잘 나오나 안나오나..하하.
아래는 압축파일에 들어가있는 파일들입니다.
png 로 제작 되어진것입니다.
iconBox.zip
간단하게 사용방법
하이퍼 링크 방식이 기본이지만(기본 방법은 설명 안드립니다.) 좀더 태그코드를 줄이게 되면...
하이퍼 링크가 뭘까라고 생각하시는 분은 검색 해보세요.하하
아이콘 이미지에 직접 링크거는 방법
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" style="cursor:hand" />
이미지에 온클릭 소스를 쓸경우 마우스 커서가 일반적인 화살표가 되기 때문에 cursor:hand 커서를 지정 해주어 링크가 있다는 표시를 해주게 했습니다.
좀더 이미지에 효과를 줘보면..마우스 오버랩을 시켰을 경우 변화도록....
A)))))
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" style="cursor:hand;filter:gray" onmouseover=this.style.filter='' onmouseout=this.style.filter='gray' />
위 코드는 칼라 아이콘 이미지를 평상시엔 흑백으로 보여지고 마우스를 올렸을경우 원래의 칼라가 보이도록 하는 방법입니다.
그리고.
B)))))
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" style="cursor:hand" onmouseover=this.style.filter='gray' onmouseout=this.style.filter='gray' />
이렇게 하면 원래의 칼라로 보여지고 마우스 오버시에 흑백으로 보여지게 하는 것이죠.
A 와 B 와 차이점은 style="cursor:hand;filter:gray" onmouseover=this.style.filter='' onmouseout=this.style.filter='gray'
이부분입니다.
그리고 또또...
두개의 이미지로 효과를 주는 방법..
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" style="cursor:hand" onMouseover=this.src="걸고자 하는 아이콘 이미지 주소" onMouseout=this.src="걸고자 하는 아이콘 변화 이미지 주소" />
레이어로 원하는 위치에 고정시키기
<div style="display:scroll;position:fixed;top:10px; left:1px;cursor:hand">
top:윗쪽 여백;
left:왼쪽으로 부터 여백 ;
참고팁 : 위 코드에서는 top 과 left로 되어있습니다.응용을 하면 bottom 과 right 로 해서 해도 되겠죠.
bottom 은 아래를 기준으로 하는것이고 right는 오른쪽을 기준으로 하는것이겠죠.
그리고 레이어에 cursor:hand 커서를 정의 해주었므로 각각의 이미지에 들어가는 커서 정의는 안넣어도 되겠습니다.
태그의 양이 많아지면 로딩에도 영향이 있는거라서요.입력 해놓아도 별 상관없지만 중복적으로 더 넣을 필요는 없죠.
한번만 넣어도 되는거라면....
종합하자면..
<div style="display:scroll;position:fixed;top:10px; left:1px;cursor:hand">
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" /><br />
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" /><br />
<img src="걸고자 하는 아이콘 이미지 주소" border="0" alt="링크설명 또는 제목" onclick="window.open('http://링크주소');" /><br />
</div>
위와 같이 하면 되겠죠.
그외 여러가지 방법이 많쵸.컬러로 효과도 있지만 흐리고 진하게,하나는 움직이는 파일로 해서 보여주기 등등...
온클릭 코드를 팝업으로 열리게 등등 태그는 참으로 알면 알수록 신기합니다.하하.
오늘은 요것만...하하.
꼭 필요로 하는 분에게는 단비가 되길 바라며....
유니스타일 팁 :
태그의 정확한 명칭을 몰라서 검색하기 어렵다 하면 문장으로 예를들어 "이미지에 마우스 올렸다 내렸다 하면 변화는 방법" 이런식으로 문장으로 검색하셔도 어느정도 검색이 되어집니다.
누구에게 물어보면 쉽고 간편하게 답을 받을수 있지만 스스로 좀더 알아보는 방법이 좋치 않을까 해요.
'구름집 > 마루(하늘)' 카테고리의 다른 글
| 제목을 뭐라 할까??? (0) | 2010.08.03 |
|---|---|
| 블로그 글분류 펼쳐놓기 (2) | 2009.09.11 |
| 티스토리 초대권 드립니다. (23) | 2007.04.11 |
| 0 |
