오늘은 CSS sprite를 이용한 끊김없는 마우스오버(롤오버)효과 이미지 넣는 방법에 대해 알아보도록 하겠습니다. 티스토리 같은 설치형 블로그의 가장 큰 장점은 사용자 마음대로 꾸밀 수 있다는 것이죠. 조금 더 화려하게 꾸미려면 flash 액션스크립트를 이용하거나, jQuery나 자바스크립트를 이용해서 알록달록 번쩍번쩍 할 수 있는 방법은 아주 많습니다. 하지만 문제는 포스팅할 시간도 빡박한데 블로그스킨 꾸미고 있을 시간이 녹록하지 않다는거죠. 맘같아선 블로그 전체를 갈아 엎고 새단장을 하고 싶은데 그놈의 시간이 문젭니다. 그래서 오늘은 css 스타일만 약간 만져서 배너나 아이콘 등에 끊김없는 마우스오버(롤오버)효과를 넣는 방법을 간단히 알아보도록 하겠습니다. 정말로 간단합니다.
마우스 롤오버 효과를 낼 수 있는 방법은 많습니다. 오늘은 간단히 이미지와 html 코드만으로 할 수 있는 방법에 대해 알아보도록 하겠습니다.
먼저, 첫번째 방법1은 기본 이미지와 마우스 오버 이미지, 즉 2개의 이미지로 만드는 방법입니다만 저렇게 만들면 마우스를 이미지에 올리는 순간 아주 살짝 끊김현상이 발생합니다. 이미지를 로딩하는 시간 때문에 발생하는 렉 같은 현상인데요, 그래서 오늘은 방법2를 이용하도록 하겠습니다.
두번째 방법2는 방법1에서 사용한 두개의 이미지를 붙여서 하나의 이미지로 만든 다음, 마우스over시와 평상시에 보여줄 이미지 영역을 별도로 지정해서 이미지의 일부만 보이게 하는 방법입니다. 이런 방법으로 버튼이나 배너를 만들면 마우스를 이미지에 올리더라도 끊김현상이나 렉현상 같은 것은 없습니다.
그렇다면 이런 질문을 하시는 분들이 아마 계시겠지요? "방법2에서 처럼 이미지 2개를 합쳐서 한번에 로딩하면 블로그가 느려지는 것 아닐까요?" 답은 "그렇지 않습니다." 입니다. 저런 이미지 하나에 용량이 1-2kb 정도도 채 안되기 때문에 요즘같은 빠른 인터넷 시대에는 티끌정도의 용량밖에 되지 않아서 느려지거나하는 증상은 없으니 염려 놓으세요.
먼저 이미지를 만들어서 블로그에 업로드 해야겠죠?
마우스 올리고 내릴 때 사용할 이미지는 두개를 붙여야하는데 이 두개의 이미지는 똑같은 크기로 만들어 붙여야합니다.
아니 그렇게 만드는게 블로그에 적용하기에는 훨씬 더 수월하다는 표현이 정확하겠네요.
크기가 달라도 범위를 지정할 수 있습니다만, 정확히 적용하는데 시간이 좀 걸려서 여기서는 다루지 않겠습니다.
이미지를 만들었으면 블로그에 업로드합니다.
업로드한 파일의 이름을 잘 기억해두세요. 제가 업로드한 파일은 twitter.gif 입니다.
이제 Style.css 를 열고 위 코드를 적당한 위치에 넣어줍니다.
제가 만든 이미지의 크기는 가로 200px, 세로 40px 이미지를 두 개 붙였으니 총 80px 입니다.
사이즈는 위 사진 보시고 이미지에 맞게 잘 적용하시고요, html에서 사용할 id 도 정확히 넣어주세요.
위 코드 다운 ▶
mouseover_CSS.txt
3. HTML 코드 넣기.
이제 끝났습니다. 원하는 곳에 위와 그림과 같이 아래에 적은 코드를 넣으면 됩니다.
위 그림은 티스토리 사이드바에 배너를 넣는 그림입니다. 끝~!
위 코드 다운 ▶mouseover_HTML.txt
4. 완성된 이미지 보기. (모바일에선 보이지 않습니다.)
제 블로그 최하단의 각종 아이콘들이 보이시나요? 거기 마우스를 올려보세요.
어떻습니까? 생각보다 쉽죠?
해보시고 모르는게 생기면 댓글로 질문 달아주세요.
이미지 맵
블로그 정보
언젠간날고말거야™의 여행블로그. 국내여행기, 해외여행기, 영화리뷰 등을 다룹니다.
✔ 댓글이 개 있습니다.