마우스반응 테이블

 

★마우스를 대면 색상이 바뀌는 효과

그럼 이번에는 메뉴에 마우스를 올리면 색상이 바뀌는 효과를 배워볼까요?

자 ~ 아래의 표를 보세요. 마우스를 대니깐 색상이 바뀌죠?

테이블 1	테이블 2
테이블 3	테이블 4

 
이건 무척 간단한 소스인데요

onmouseover="this.style.backgroundColor='#F8ABAA'"  onmouseout="this.style.backgroundColor=''"

이것만 기억하세요.
앞에 있는 색상은 마우스를 올렸을 때 나오는 색상이구요.
뒤에있는 backgroundColor='' 는 다시 원래의 색으로 돌아간다는 뜻입니다.
만약에 마우스를 떼었을 때 또 다른 색상을 만들고 싶다면 ' ' 안에 색상을 명시해주면
되겠죠? 이 소스를 메뉴표가 위치한 곳의 html문서를 열어서
샘플홈에서는 메뉴가 왼쪽 프레임에 있죠? 그럼 왼쪽 프레임의 메뉴가 위치한곳을
마우스로 한번 클릭한 담에 HTML문서를 여세요.
그럼 HTML문서안에 커서의 위치가 까만모양으로 그 위치 그대로  있게되죠.
그럼 그 부분이 메뉴가 존재하는 곳의 소스이므로 그 부분에서 위의 소스를
삽입해주면 된답니다.

대신 셀속성을 생각하고 넣어야되요.
즉 전체 표부분이 아니라 <td ~~~~> 로 시작되는 부분안에 각각 넣어야된다는 뜻이죠.
그 부분마다 찾아서 같은 위치에 위의 소스를 다 넣어주세요.
그리고 메뉴마다 색상을 다르게 하고 싶다면 소스를 삽입할 때마다

backgroundColor='#F8ABAA'라고 되어있는 부분에서 색상만 다른 것으로 바꿔주면
됩니다.

자 그럼 색상표를 한번 구경해볼까요?^^

         색상표 보기

이 글은 스프링노트에서 작성되었습니다.