JavaScript를 사용하여 Windows와 같은 버튼을 시뮬레이션합니다

HTML 및 JavaScript를 사용하여 사용자 정의 그래픽 버튼을 만드는 것은 놀랍게도 간단합니다! 이 튜토리얼은 이미지 스와핑을 사용하여 3 개의 별개의 상태 (Up, Over, Down)로 버튼을 작성하는 방법을 보여줍니다. 우리는 여기 코드는 다음과 같습니다

javaScript 함수는 이미지의 이름과 새 파일 경로를 인수로 가져 와서 이미지 소스를 동적으로 업데이트합니다.

태그의 이벤트 핸들러 (, ButtonSubmit.gif, )는 사용자 상호 작용을 기반으로 이미지 스왑을 트리거합니다. 이미지 자체는 ButtonSubmit-over.gif 태그 내에 중첩됩니다. 접근성을위한 속성의 추가에 유의하십시오 설명 : ButtonSubmit-down.gif

: 이 함수는 로 식별 된 이미지 요소의

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onmouseover="ReplaceImage('ImgSubmit', 'ButtonSubmit-over.gif')" onmousedown="ReplaceImage('ImgSubmit', 'ButtonSubmit-down.gif')" onmouseout="ReplaceImage('ImgSubmit', 'ButtonSubmit.gif')">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136519147164.gif" class="lazy" alt="Simulate a Windows-like Button Using JavaScript ">
</a>

속성을 ​​새 이미지 경로 . ReplaceImage() <a></a> onmouseover onmousedown : onmouseout 이것은 하이퍼 링크를 만듭니다. <a></a>는 새로운 페이지로의 탐색을 방지합니다 alt

, , : : : 마우스 상태를 기반으로 이미지를 변경하려면 (호버, 클릭, 떠나는).

• :

  이것은 이미지를 표시하며 가 javaScript를 참조 할 수 있도록합니다. ReplaceImage(sImgName, sImgFile) 이 방법은 동적 이미지가 변경된 시각적으로 매력적인 버튼을 만들어 많은 응용 프로그램에서 버튼의 모양과 느낌을 모방합니다. 이미지 파일의 실제 경로로 , src 및 sImgName를 바꾸는 것을 잊지 마십시오. 최상의 결과를 얻으려면 일관된 크기의 이미지를 사용하여 레이아웃 시프트를 방지합니다.

위 내용은 JavaScript를 사용하여 Windows와 같은 버튼을 시뮬레이션합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!