타이틀을 변하는이미지로 바꿔봤습니다

타이틀에 마우스를 가져가면 바뀌게 변경하였습니다.

평상시 선명하게 표시되고요.

마우스를 가져가면 이렇게 바뀌는 겁니다.

HTML코드는 친해지기 어렵네요.

 

코드는 어렵지만 작동방법은 의외로 간단합니다.

비활성화일때는 특정부위의 이미지가 보이고 마우스를 가져가면 이미지의 숨겨진부분이 보이게 하는방식입니다.

 

우선 적용할 이미지를 2단으로 만듭니다.

  -저는 색이 바래게 만들어봤습니다.

  -타이틀이니 근사하게 만드세요 전 파워포인트로 만든거라 많이 흐리네요.

  -세로 픽셀은 짝수로 만드시는것이 위치마추기가 수월하더군요..

  -아래 이미지 왼쪽의 여백은 제블로그에 마추다보니 확장하였어요.

제가 적용한 이미지

  *클릭(Select) 했을때 변하게도 할수가 있는데 3단으로 아래 한단을 만드시면 되겠습니다.

 

SKIN.HTML 에 타이틀을 찾으세요.

주석처리 하시고요

<!--<h1><a href="https://tjdeo.tistory.com/" title="빼꼼">빼꼼</a></h1>-->

 

아래쪽에 아래 문구를 넣어줍니다.

<div class="titleimg"> <a href="https://tjdeo.tistory.com/" title="빼꼼"></a></div>

div class로 묶고 titleimg로 이름을 지정하였습니다.

title="빼꼼" 마우스포인트를 가져갔을때 나오게하는 도움말입니다.

 

 

Style.CSS에서 적당한곳에 아래 문구를 넣으세요.

Header메뉴 아래쪽에 위치시키면 수정하기가 편합니다..

.titleimg      { width: 283px;
                 margin: -41px 0px 0px 0px;
}
.titleimg a{ display: block;
             background: transparent url(images/logo6.png) 100% 0;
             height: 76px; padding: 4px 0 4px 10px;
             text-decoration: none;
}
.titleimg a:hover{ background-position: 100% -84px;
}
/*3단구성시*/
.titleimg a:selected{ background-position: 100% -120px;
}

width: 283px; > 이미지 보이게하는 가로폭 조정

margin: -41px 0px 0px 0px; >이미지 위아래 위치조정

background: transparent url(images/logo6.png) >이건 만든 이미지를 지정하시면 되겠죠

height: 76px; >이미지 보이게하는 세로폭 조정

background-position: 100% -84px; > 마우스를 가져갔을때 보이게 하는위치입니다.

 

이건 3단으로 하셨을때 설정하면 되겠습니다.

.titleimg a:selected{ background-position: 100% -120px; } >클릭하였을때 보이는 이미지의 위치.

 

이제 #container 위치 메뉴위치를 잡아주시면 완성입니다.

 

 

test

ie6: O

ie8. O

구글크롬: O
파이어폭스:O.