이미지 위에 마우스를 올리면 이미지 회전

동영상: CSS3을 이용한 이미지에 마우스 올렸을 때,지정된 시간동안 회전

콘텐츠

지침
필요한 것

"onMouseOver"기능 ( "마우스 오버"라고도 함)은 마우스 커서가 객체 위에있을 때 사용자 인터페이스에서 동작을 트리거하는 JavaScript 이벤트입니다. 자바 스크립트는 주로 웹 페이지에서 사용되므로 이벤트가 대개 자바 스크립트 코드가 작성된 페이지에서 변경됩니다. 온라인 이미지 편집 웹 사이트의 "회전"도구와 결합 된 onMouseOver 기능을 사용하면 사용자가 이미지 위에 마우스 커서를 올려 놓았을 때 트리거되는 이미지에 스핀 효과를 만들 수 있습니다.

지침

"onMouseOver"도구 사용 방법 배우기 (Michael Blann / Lifesize / Getty Images)

기본 브라우저를 시작하고 주소 표시 줄에 온라인 이미지 편집 사이트 (예 : Pixenate, Pixlr 또는 LunaPic)에 대한 링크를 입력하고 "Enter"키를 누릅니다.
"편집 할 이미지 선택"링크 또는 "컴퓨터에서 이미지 열기"버튼을 클릭하여 회전하려는 이미지를 전송하십시오. 클릭하여 이미지를 선택한 다음 "열기"를 클릭하십시오. 파일을 업로드하려면 "이 이미지 업로드"를 클릭하십시오.
이미지 편집 툴바에서 '회전'도구를 클릭하거나 '이미지'를 클릭하고 '캔버스 회전'을 선택하십시오. 클릭하여 회전 및 설정 정도를 선택하고 "디스크에 저장"또는 "파일"을 클릭 한 다음 "저장"을 클릭하십시오. 회전 된 이미지를 원본 이미지 파일과 동일한 디렉토리에 저장하십시오.
기본 HTML 편집기를 시작하십시오. HTML 편집기가 없으면 참고 자료 절의 "무료 HTML 편집기"링크를 클릭하십시오. 새 HTML 문서를 만듭니다.
"파일"메뉴를 클릭하고 "저장"을 선택하십시오. 문서의 이름으로 "rotate.html"을 입력하고 저장 디렉토리로 "image1"및 "image2"파일이 들어있는 폴더를 선택하십시오. "저장"을 클릭하십시오.
새 HTML 문서에서 ">"및 ""태그를 찾습니다. 마우스 커서를 두 개의 본문 표시 사이에 놓고 "Enter"키를 눌러 새 줄을 만듭니다.
빈 줄에 "rotatingimage.gif"텍스트를 회전 된 이미지 이름으로 바꾸고 "originalimage.gif"텍스트를 원래 이미지 이름으로 바꾸십시오.

새 줄을 만들려면 "Enter"키를 누릅니다.
다음을 입력하십시오.

"Enter"키를 누릅니다.
유형 :

"파일"메뉴를 클릭하고 "저장"을 선택하십시오.
"rotate.html"파일을 두 번 클릭하여 기본 브라우저에서 엽니 다. 마우스를 이미지 위로 가져 가면 회전 효과를 볼 수 있으며 마우스 커서를 이미지 밖으로 이동하면 회전하지 않고 원래 이미지로 돌아갑니다.