글제목 왼쪽 달력 부분에 마우스를 올려보세요. 날짜 부분이 변경되죠? 이 소스를 알아보도록 하겠습니다.테이블이나 글자, DIV 등 어떤 요소든 가리지 않습니다.
1) 테이블에 나타내고자 하신다면,
테이블 셀 배경색을 마우스를 올렸을 때 lightgreen으로 변경합니다.
<Table><TR><TD onMouseOver="this.style.backgroundColor='lightgreen'" onMouseOut="this.style.backgroundColor=''">내용</TD></TR> </Table>
테이블 셀 배경색을 마우스를 올렸을 때 lightgreen으로 변경합니다.
2) 링크가 걸린 글자에 나타내고자 하신다면,
글자 부분에 마우스를 올렸을 때 글자 색을 #FF0000 으로, 글자굵기를 굵게 변경하고,
마우스가 글자 부분에서 벗어났을 때는 아무런 스타일을 주지 않습니다.
<a
href="#" onmouseover="this.style.fontWeight='bold';this.style.color='#FF0000';"
onmouseout="this.style.fontWeight='';this.style.color='';">이온디</a>
글자 부분에 마우스를 올렸을 때 글자 색을 #FF0000 으로, 글자굵기를 굵게 변경하고,
마우스가 글자 부분에서 벗어났을 때는 아무런 스타일을 주지 않습니다.
이렇게 this.style.원하는스타일 과 같은 형식으로 배경색/폰트스타일/글자색 등을 다양하게 줄 수 있습니다.
스타일을 적용할 때 작은따옴표, 큰따옴표를 주의해서 사용하세요.
onmouseover 전체를 감싸는 것은 큰따옴표(")이고, 스타일시트의 형태를 지정하는 부분은 따로 작은따옴표(')로 감싸주어 구분을 합니다.
이제 위에서는 직접 스타일시트를 적어줬다면, 아래는 class로 주는 방법을 알아보겠습니다.
3) DIV에 마우스를 올렸을 때,
위의 예제들과는 달리 this.className 으로 스타일을 줄 수 있습니다.
이렇게 클래스로 적용할 때는 css 파일 내에 클래스명을 적어주어야 합니다.
큰따옴표, 작은따옴표 구분이 있어 복잡한데 이렇게 class를 이용해 소스가 간단해지니 실수할 일도 줄어들겠죠.
적용하는 부분에는 위와 같이 해주었다면 클래스는 다음과 같이 해주어야 합니다.
이렇게 클래스를 따로 만들어주시면 적용이 끝납니다.
<div
class="calendar"
onMouseOver="this.className='calendarOver'" onMouseOut="this.className='calendar'"><script type="text/javascript">write_calender("[##_article_rep_date_##]");</script></div>
위의 예제들과는 달리 this.className 으로 스타일을 줄 수 있습니다.
이렇게 클래스로 적용할 때는 css 파일 내에 클래스명을 적어주어야 합니다.
큰따옴표, 작은따옴표 구분이 있어 복잡한데 이렇게 class를 이용해 소스가 간단해지니 실수할 일도 줄어들겠죠.
적용하는 부분에는 위와 같이 해주었다면 클래스는 다음과 같이 해주어야 합니다.
<style>
.calendar { color:#f0f0f0; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; } //calendarOut과 같으니 그냥 calendar로 했습니다.
.calendarOver {color:#FFFFFF; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
</style>
.calendar { color:#f0f0f0; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; } //calendarOut과 같으니 그냥 calendar로 했습니다.
.calendarOver {color:#FFFFFF; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
</style>
이렇게 클래스를 따로 만들어주시면 적용이 끝납니다.
4) DIV 안에 DIV 로 감싼 영역까지 적용을 시키려면 어떻게 해야할까?
자, 위에까지만 하시면 기본적인 사용법은 끝이 납니다. 이제부터는 좀 더 심화반으로 넘어가보겠습니다.
잠깐만 다시 위로 거슬러 올라가서 위의 DIV 안에서의 코드를 살펴보시면 다음과 같은 내용이 보입니다.
노란색으로 형광색칠한 부분, 바로 <script>..</script> 인데요, 저 스크립트의 내용을 살짝 살펴보자면,
이렇게 <div class="calendar" .. >로 감싼 부분 안에 또 다시 <div class='content_title_calender_month'> .. 가 있는 게 보입니다. 이렇게 2번 DIV로 감싼 영역은 스타일시트 클래스를 어떻게 하느냐면,
위는 <div class="entry"> 안에 <div class="calendar"> 안에 <div class="content_title_calender_month"> 로 3번 감싼 영역이라 앞에 .entry 가 하나 더 붙어있습니다.
그리고 OnMouseOver 했을 때의 클래스도 함께 적어주어야 하므로 코드가 좀 깁니다.
이렇게 해줘야지 div 안에 감싼 영역까지 제대로 표시가 되는 겁니다. 끝~*
자, 위에까지만 하시면 기본적인 사용법은 끝이 납니다. 이제부터는 좀 더 심화반으로 넘어가보겠습니다.
잠깐만 다시 위로 거슬러 올라가서 위의 DIV 안에서의 코드를 살펴보시면 다음과 같은 내용이 보입니다.
<div
class="calendar"
onMouseOver="this.className='calendarOver'" onMouseOut="this.className='calendar'"><script type="text/javascript">write_calender("[##_article_rep_date_##]");</script></div>
노란색으로 형광색칠한 부분, 바로 <script>..</script> 인데요, 저 스크립트의 내용을 살짝 살펴보자면,
document.write("<div
class='content_title_calender_month'><B>" + month + "</B></div>");
document.write("<div class='content_title_calender_day'><B>" + day + "</B></div>");
document.write("<div class='content_title_calender_day'><B>" + day + "</B></div>");
이렇게 <div class="calendar" .. >로 감싼 부분 안에 또 다시 <div class='content_title_calender_month'> .. 가 있는 게 보입니다. 이렇게 2번 DIV로 감싼 영역은 스타일시트 클래스를 어떻게 하느냐면,
.entry .calendar {
float:left; width:40px; height:46px; background:url(./images/entry_calendar.gif) no-repeat 2px 1px; }
.entry .calendar .content_title_calender_month { color:#f0f0f0; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
.entry .calendar .content_title_calender_day { color:#b9b7b7; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; }
.entry .calendarOver { float:left; width:40px; height:46px; background:url(./images/entry_calendar.gif) no-repeat 2px 1px; }
.entry .calendarOver .content_title_calender_month { color:#f0f0f0; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
.entry .calendarOver .content_title_calender_day { color:#FFFFFF; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; }
.entry .calendar .content_title_calender_month { color:#f0f0f0; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
.entry .calendar .content_title_calender_day { color:#b9b7b7; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; }
.entry .calendarOver { float:left; width:40px; height:46px; background:url(./images/entry_calendar.gif) no-repeat 2px 1px; }
.entry .calendarOver .content_title_calender_month { color:#f0f0f0; font:9px Tahoma; margin-top:4px; text-align:center; width:35px;}
.entry .calendarOver .content_title_calender_day { color:#FFFFFF; font:bold 14px Tahoma; margin-top:4px; text-align:center; width:35px; }
위는 <div class="entry"> 안에 <div class="calendar"> 안에 <div class="content_title_calender_month"> 로 3번 감싼 영역이라 앞에 .entry 가 하나 더 붙어있습니다.
그리고 OnMouseOver 했을 때의 클래스도 함께 적어주어야 하므로 코드가 좀 깁니다.
이렇게 해줘야지 div 안에 감싼 영역까지 제대로 표시가 되는 겁니다. 끝~*
-
수정 삭제css의 hover를 쓰시면 더 간단합니다...답변 달기
