본문 바로가기

마우스오버

[jQuery] jQuery를 이용한 이미지의 마우스오버2 일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다. 일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애.. 더보기
[jQuery] jQuery를 이용한 이미지의 마우스 오버 작업을 하다보면 이미지에 마우스오버 효과를 줘야 할 때가 많은데, 일일히 onmouseover 와 onmouseout 을 써서 따로 지정해주는 것도 참 일이다. 일단 코드가 길어져서 가독성에 떨어지게 되고 파일의 갯수가 많다면,,, 음,,, 용량도 커지지 않을까? 그리고 따로 파일마다 id 를 준다거나 각각 함수를 만들어서 사용하는 것도 정말 번거로운 일이다. 이 모든 것을 jQuery가 해결해주는 듯 싶다. 사용법을 이야기 해볼까? 우선 jQuery 를 로드해야 한다. 그 다음에는 아래의 코드를 모든 페이지에서 동작하게 한다. 이미지의 네이밍을 잘 해야 하는데,, 파일명 맨 뒤에 _(언더바)를 붙이고 오버되었을때 "on" 아웃되었을 때 "off" 라고 해서 이름을 설정해야 한다. 예를 들자면, imag.. 더보기
반응형

티스토리툴바