메뉴 이미지 롤오버 문의합니다.
모두다
style type=text/css
.m01 a {background:url(../images/이미지01.gif) no-repeato-repeat 0 0; width:30px height:30px; text-indent:-5000px; overflow:hidden;}
.m02 a {background:url(../images/이미지02.gif) no-repeat 0 0; width:30px height:30px; text-indent:-5000px; overflow:hidden;}
.m03 a {background:url(../images/이미지03.gif) no-repeat 0 0; width:30px height:30px; text-indent:-5000px; overflow:hidden;}
.m04 a {background:url(../images/이미지04.gif) no-repeat 0 0; width:30px height:30px; text-indent:-5000px; overflow:hidden;}
.m01 a:hover {background:url(../images/이미지01.gif) no-repeat 0 100%; width:30px height:30px;}
.m02 a:hover {background:url(../images/이미지02.gif) no-repeat 0 100%; width:30px height:30px;}
.m03 a:hover {background:url(../images/이미지03.gif) no-repeat 0 100%; width:30px height:30px;}
.m04 a:hover {background:url(../images/이미지04.gif) no-repeat 0 100%; width:30px height:30px;}
/style
body
div
ul
li class=m01a href=#menu01/a/li
li class=m02a href=#menu02/a/li
li class=m03a href=#menu03/a/li
li class=m04a href=#menu04/a/li
/ul
/div
/body
위와 같은 짜임으로 메뉴를 구성하였습니다.
이미지는 백그라운드 처리해서 두개의 이미지를 하나로 짤라서 위치로 롤오버 처리했습니다.
이렇게 코딩하는게 자연스러운 형태인가요?
그리고 질문하는 이유는 여기서 오버 이미지를 visited 이미지로 고정시키려면(오버한 해당 페이지 방문했을 때)
어떻게 처리해야 하는지 알려주시면 좋겠습니다. CSS로는 표현이 불가능한거죠?
스크립트를 써야한다면 어떻게 구현하는지 알려주시면 좋겠습니다. 스크립트는 문외한이라.. 설명도 해주시면 좋습니다..
도움 부탁드립니다.