마우스 오버 시 링크 된 이미지 색상이 변하는 버튼 만드는 방법

 사이트나 블로그는 RSS 구독이나 트위터와 페이스북, 라인과 카카오 등 다양한 형태의 소셜 버튼을 이용하여 공유할 수 있으며, 서비스 제공 업체의 특성에 따라 스킨이나 위젯 등 다양한 형태로 디자인을 변경하여 사용하기도 합니다. 웹 페이지의 구성 요소에 마우스 커서를 위치 시키면 텍스트 형태의 팝업 창이 활성화 되어 제목을 표시하거나 브라우저 하단에 일부 또는 전체 주소 등이 표시가 되며, 자바 스크립트 애니메이션이나 플래시 등의 동영상이 재생 되기도 하는데, 이번 포스팅에서는 마우스 오버 시 링크 된 이미지 색상이 변하는 버튼 만드는 방법에 대해 소개해 드리도록 하겠습니다.

 

 

* 마우스 커서를 아이콘에 위치 할 때 색상이 변하는 이미지 버튼 만들기

 

☞ 첨부파일: On Mouse Over HTML Code.txt [1KB]

 

※ 바로가기가 링크 되어 있는 이미지 아이콘에 마우스 커서를 위치 시키는 경우 색상이 변하도록 설정하기 위해서는 기본적으로 동일한 크기에 컬러나 디자인이 다른 image 또는 icon 파일이 필요하며, RSS 구독이나 SNS 소셜 버튼 등을 다른 형태로 사이트나 블로그 디자인에 적용할 수 있습니다.

 

 

※ <a href="링크주소"><img src="기본이미지URL"

onmouseover="this.src='마우스오버이미지URL'" onmouseout="this.src='기본이미지URL'" border="0"></a>

 

※ 첨부 파일의 'On Mouse Over HTML Code.txt' 텍스트 문서를 다운로드 받아 메모장으로 불러오기 한 후 바로가기로 사용할 '링크주소'와 함께 '기본 이미지'와 '마우스 오버 이미지'의 '주소를 입력하여 사이트 또는 블로그 스킨이나 위젯에 적용하면 되는데, 'img src' 이후 URL은 2중 인용 부호인 큰 따옴표(")로 구성되어 있는 반면에 'this.src=' 이하 주소는 2중 인용 부호 앞에 인용 부호 즉, 따옴표(')를 적용 시 삭제하지 않도록 해야 합니다.

 

 

☞ 관련 포스팅: 네이버 블로그에 트위터 위젯 설치하는 방법

 

 마우스 커서를 링크 된 이미지 아이콘에 위치하는 경우 색상이 변하는 버튼은 웹사이트나 HTML과 CSS 편집을 지원하는 워드프레스와 구글 블로거, 티스토리 이외에 보안상의 이유로 '<iframe> ~ </iframe>' 이나 '<script> ~ <script>' 방식의 소스 코드를 사용할 수 없는 네이버 블로그에서도 사이드바의 위젯이나 스마트에디터 3.0 기준으로 본문에 적용 할 수도 있습니다. 이미지 파일의 URL은 인터넷 웹 브라우저 상에서 마우스 오른쪽 버튼을 눌러 '바로 가기 복사(T)'를 하거나 '속성(R)'을 선택 한 후 주소에서 '?' 물음표 앞 까지의 내용을 복사하여 사용하면 되는데, 참고로 웹 상의 파일은 업로드 형태나 서비스 제공 사이트의 지원 여부에 따라 제한이 될 수도 있으며, 티스토리의 경우 HTML/CSS 편집의 파일업로드 기능을 이용하면 됩니다.