텍스트큐브의 버튼과 텍스트박스 롤오버시 border의 색을 바꿔주는 자바스크립트
코덕질/해탈내역들 2009/01/05 19:19
2일간의 Berryz Webshare를 이용한 임시 웹서버 운영 끝에 고안해낸 삽질작입니다.
보시면 아시겠지만 이제 텍스트큐브에서도 티스토리같이 마우스 롤오버시 색이 바뀝니다.
이것은 자바스크립트의 프로토타입의 Event.observe를 이용한 것으로서, 원래는 textarea나 button에 onmouseover/onmouseout 이벤트를 적용시켜야 하지만 여기에서는 전적으로 동적으로 이벤트를 적용시켰습니다. 덕택에 아직 HTML을 뜯을 수는 없지만 마우스 오버/롤오버 효과가 구현 가능해졌습니다.
적용방법은 이 코드를 HTML위젯에 넣으시면 됩니다.
<!-- Prototype (ver 1.6) -->
<script src="http://kuna.wo.tc/537/attach/prototype.js"></script>
<!-- 이 js는 prototype을 사용하니 반드시 prototype.js를 로드하셔야 합니다!! -->
<script src="http://kuna.wo.tc/537/attach/tb_event.js"></script>
<script src="http://kuna.wo.tc/537/attach/prototype.js"></script>
<!-- 이 js는 prototype을 사용하니 반드시 prototype.js를 로드하셔야 합니다!! -->
<script src="http://kuna.wo.tc/537/attach/tb_event.js"></script>
이미 프로토타입이 include되어 있으신 분은 다시 넣으실 필요가 없습니다.
아마 테두리 색상이 마음에 안 드시는 분들도 있을텐데, 그럴 경우에는 직접 js파일을 열으셔서
// 마우스 올렸을 때 스타일
var element = event.element();
element.style.border = "#006699 1px solid";
var element = event.element();
element.style.border = "#006699 1px solid";
이 부분을 입맛에 맞게 수정하신 후, 다시 업로드 하시면 됩니다 :D
소스 구현에 대한 자세한 설명(Event.observe)는 후에 javascript 강좌로 따로 다시 올리도록 하겠습니다.
이상 자바스크립트로 떡칠이 되어가는 쿠나의 브롤그였.. [퍽!]
댓글을 달아 주세요
오오...!!
티스토리에서만 되는 기능이 이제 여기서도 되는 것이군요~
음.. 뭐랄까요, 그냥 자바스크립트의 승리입니다 헤헷!!
.. 이미 스킨을 티스토리하고 다를 것 없이 꾸며나가고 있는 1人
저런거 많아지면 블로그가 무거워짐~
가볍게~ 또 가볍게~ 해야함(퍽!)
음.. 디자인'만' 산뜻하고 가볍게를 컨셉으로 진행.. [도주]
어우 또 블로그링 튀어나왔네요 ㅠㅠ
음.. 오랜만에 보는 브롤그링이네요.. 차단할까 말까 고민.. -_-a.
오오 좋군요 고맙습니다. 당장 적용해 봐야지 :)
IE6에서는 제대로 안먹는 모양이더군요... =_=a
적용해 보셔요 ㅋ
좋네요.. 적용할까나..
아 블로그링 짜증나요 ㅠㅠㅠㅠㅠㅠ,
아예 트랙백 못 보내게 차단시키긴 했는데..
그래도 녀석은 여전히 글을 수집해갈것이고 ㅠㅠ,
음.. 브롤그링 목적이 뭔지부터 궁금하기는 한데 말입니다. 소개도 전혀 없고.. 불법적인 목적에 쓴다고 해도 어디에 쓰려고 하는지도 감도 안 오고 -_-a
우오.. 죽이는군요...
저도 적용 ㄱㄱ
IE6에서는 잘 안먹힌다는 전설이 있습니다. 함 적용해 보세요 ㅋ.
감사합니다~
적용해봐야지~
우앗, 알루카님 빠르시군!