수다닷컴

인터넷과 책을 뒤져가며 만들어봤습니다;

먼저 전체 소스입니다.

---------------------------------------------------------------------------
!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 /
title000/title
style type=text/css

body{ background: #ffffff;
padding:0px;
height:100%;
width:100%;
text-align: center;
}
#wrapper {
width:861px;
text-align: left;
margin: 0 auto;
}
#top{
background:#ffffff;
padding:20 20 20 20px;
height:50px;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#center{
background:#ffffff;
padding:20 20 20 20px;
height:300px;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#menu{
float:left;
background-color:#cccccc;
padding:20 20 20 20px;
width:123px;
height:46px;
text-align:center;
border:#cccccc solid 0px;
margin:0 0 0 10;
}
#content{
background:#ffffff;
padding:20 20 20 20px;
height:auto;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#foot{
background:#ffffff;
padding:20 20 20 20px;
width:861px;
height:50px;
margin:10 0 0 0;
border:#cccccc solid 1px;
}
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
/style
/head
body
div id=wrapper
div id=topTOP/div
div id=centermainImage/div
div style=width:861px;
a href=http://www.naver.com class class=rollover
img src=menu1.jpg
img src=menu1_1.jpg class=over
/a
a href=주소 class=rolloverimg src=menu2.jpg
img src=menu2_2.jpg class=over
/a
a href=주소 class=rolloverimg src=menu3.jpg
img src=menu3_3.jpg class=over
/a
a href=주소 class=rolloverimg src=menu4.jpg
img src=menu4_4.jpg class=over
/a
a href=주소 class=rolloverimg src=menu5.jpg
img src=menu5_5.jpg class=over
/a
a href=주소 class=rolloverimg src=menu6.jpg
img src=menu6_6.jpg class=over
/a
a href=주소 class=rolloverimg src=menu7.jpg
img src=menu7_7.jpg class=over
/a
/div
div id=contentcontent/div
div id=footFOOT/div
/div
/body
/html

------------------------------
위의 빨간 부분은 원래,

divstyle=width:861px;
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
/div
------------------------------
였는데요, 메뉴라서 롤오버 넣고 싶은 마음에 뒤져보니까 CSS만으로 롤오버 만들기..이런게 있길레
따라 해봤구요, 적용 되더군요. 그런데 문제는-.
메뉴 이미지 사이 사이마다 여백이 생깁니다.
ㅜ.ㅜ

급한 마음에 이 방법을 접고 자바스크립트로도 만들어보았는데요 똑같이 롤오버는 적용이 되지만
여백이 생깁니다;;일단 여백이 생기는 문제도 해결못하고 있으니 답답해서 글 올려봅니다.
가르침 부탁드립니다..ㅠㅠ

신청하기