끄적대기

<ul id="menu_area">  <li><a href="#">이미지</a></li> </ul> <style type="text/css"> #menu_area{margin:10px 0 0 40px;} #menu_area li a{display:block;width:50px;height:19px;background:url('off_img_경로') no-repeat left top;text-indent:-1000px;} #menu_area li a:hover{background:url('on_img_경로') no-repeat left top;} </style>

이 방법은 접근성에 맞지 않다는 말이 많다. 그러니 가급적으로는 프로젝트에 사용하지 않는 것이 좋으나 롤오버에 대한 이해나 접근성에 초점을 맞히지 않은 사이트나 급할때 사용하길 바란다. 우리나라의 모든 사이트가 다 양질의 사이트가 되기를 원하나 실정은...너무나 힘들기만 하니...ㅠ_ㅠ); 스크립트를 잘 이용하거나 텍스트기반에 맞는 롤오버효과를 사용하는것이 접근성에 더 효과적이라고 생각된다. <style type="text/css"> a.rollover img {display:inline; } a.rollover img.over { display:none; } //hover시에 보여줄 이미지를 처음에 감춰 둡니다. a.rollover:hover img { display:none; } //hover시에 해당 경로의 모든 이미지를 감춥니다. a.rollover:hover img.over { display:inline; } //hover로 보여줄 이미지는 보여줍니다. </style> <a href="test" class="rollover"> <img src="경로" alt="" /> <img src="" alt="" class="over" /> // 이부분이 이미지가 두번이 중복됨으로 접근성이 떨어집니다.ㅠㅠ </a>