블로그 타이틀 이미지 롤오버 효과내기

demun
티스토리스킨수정/제목
2010. 5. 11. 09:00

블로그 타이틀은 매우 중요하죠. 저도 실력이 없어서 좋은 이미지를 만들어 내지를 못하는데요... 여하는 롤오버효과를 내는 방법을 알아보겠습니다.

이전에 블로그 타이틀을 이미지로 교체하는 방법은 지난 포스팅을 참고하세요.

studiopress adsense 스킨 타이틀 이미지로 수정하기 => http://demun.tistory.com/1588

타이틀의 이미지를 롤오버효과를 내는것은 하나의 그림을 두고 포지션을 이용해서 롤오버효과를 내는것이 있고 그냥 두장으로 효과를 내는것이 있습니다.

현재 제 블로그에 상단 우측에 RSS 버튼이 한장의 이미지로 포지션을 이용해서 롤오버효과를 낸 것입니다.
마우스를 올려보세요.

여기서는 두장의 이미지로 롤오버효과를 내보겠습니다.
먼저 이미지가 두장이 필요합니다.
저의 경우 상단 우측에 RSS 버튼이 있기 때문에 그 부분을 제외한 공간을 전부 타이틀이미지로 대체해보겠습니다.

그리고 모든 브라우져에 동일하게 보여지게 하기 위해서 바탕색과 같은 바탕으로 타이틀을 하는것이 좋습니다.
저의경우 바탕색이 #CBC9B0 입니다.

먼저 두개의 이미지를 만듭니다.
저의 경우 그냥 보여지는 이미지

logo.gif

마우스를 올려질때 보여지는 이미지

logo_on.gif

이렇게 두개를 사용합니다.
간단하게 문양하고 demun 부분만 노랑색으로 변경됩니다. 실력이 잇는분은 좀더 좋은 이미지를 만들어보세요.
먼저 스킨을 저장하시고 작업하시기 바랍니다.

html 편집창에서 _title_ 를 검색해보세요. 그럼 대략 아래 처럼 나온곳이 있을겁니다.

<h1><a href="[#\#_blog_link_##]" title="처음으로"><span>[#\#_title_##]</span></a></h1>

확인만 하시고 span 이 없으시면 위에처럼 넣어주세요.그래도 아직은 변경사항이 없습니다.
타이틀 이미지를 먼저 스킨편집창에서 업로드를 해주세요. 이름이 위에처럼 logo.gif 와 logo_on.gif 라고 가정합니다.

#header h1 a{
	display:block;
	background:url(./images/logo.gif) no-repeat; //평상시 타이틀이미지
	width:795px; //이미지너비
	height:120px; //이미지높이
}
#header h1 a:hover{
	background:url(./images/logo_on.gif) no-repeat; //마우스가 올라갔을때 이미지
}
#header h1 a span{display:none;} //타이틀 글씨가 안나오게 합니다.

이러면 간단이 블로그 타이틀 이미지가 롤오버효과가 나타납니다.
한가지 팁....
혹시 코드를 넣고 높이나 너비가 안맞아서 조금 이상하게 나오시는분이 있다면 #header 에 padding:0; margin:0; 을 넣어보세요.

항상 하시고 다른 브라우져로도 확인을 해보세요.

티스토리 스킨 관련글
검색창 꾸미기 => http://demun.tistory.com/1604
댓글 배경 꾸미기 => http://demun.tistory.com/1602
댓글창 이미지 넣기 => http://demun.tistory.com/1601

개 개

demun(대문블로그)

블로그 타이틀 이미지 롤오버 효과내기

티스토리툴바