mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Wednesday, May 31, 2006

HTML-CSS] 이미지(img) 위에서, 마우스 커서를 십자가(플러스 기호)로 변경


이미지 위에서는 하얀 마우스 커서가 거추장스럽고, 그림의 감상을 방해할 수도 있습니다. 마우스 커서가 그림 위를 지날 때에, 커서를 십자가 등으로 변경하면 편리합니다.

모든 그림에서 마우스 커서 변경하는 코드



<head>
<style type="text/css">
  img { cursor:crosshair }
</style>
</head>


웹페이지의 head 부분에 위와 같이 정의해 주면, 본문의 모든 그림에서 커서가 변경됩니다.





특정 그림에서만 마우스 커서 변경하는 코드



모든 그림에서 커서 변경하는 것보다는, 다음과 같이 특정 그림에만 별도로 지정해 주는 것이 좋습니다.

<img src="그림 파일 주소" style="cursor:crosshair" alt="그림 설명" />



결과:
그림 설명


cursor:crosshair 이 속성은, 파이어폭스에도 IE에서와 똑같이 잘 작동합니다.

이미지 외에, <div> 등의 태그에서도 cursor 속성으로 마우스 커서를 바꿀 수 있습니다. 위의 코드박스에도 현재 십자가 커서가 지정되어 있습니다. 그러나 텍스트가 있는 곳에서 커서를 변경하면 방문객들에게 혼란을 줄 수 있기 때문에 기본값으로 놔 두는 것이 바람직합니다.


▶▶ HTML CSS, 마우스 커서 변경 방법, 모래시계, 십자가; Mouse Cursor Change





Q: 진짜 십자가 이미지 있는 곳은?


HTML 말고, 교회에서 쓸 십자가 이미지(The Holy Cross)는?

A: 다음 주소에서 검색해 보시기 바랍니다:
<구글 이미지 검색에서 cross 로 검색>



tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top