마우스가 이미지 또는 원하는 영역 위에 올라갔을때 변화를 줄수 있다.
주요 css
background-position, :hover
이미지 준비!
가로 : 150px, 높이 100px.
처음 보여지는 이미지는 검정색의 메뉴.
롤오버됐을땐 노란색의 메뉴이 보이게 된다.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css로 만드는 롤오버이미지</title> <style type="text/css"> .rollover { width:100%; } .rollover a { display:block; width:150px; height:50px; text-indent:-3000px; background: url(rollover.jpg) no-repeat; background-position:0 0; } .rollover a:hover { background-position:0 -50px; } </style> </head> <body> <div class="rollover"> <a href="#">롤오버이미지</a> </div> </body> </html> |
