이미지를 클릭하여 새 페이지로 이동하는 HTML을 구현하는 방법은 무엇입니까? (예)
- 藏色散人원래의
- 2018-09-03 16:56:10104022검색
웹 디자인 및 개발 과정에서 "점프 링크"의 필요성이 가장 일반적입니다. 나는 HTML에 대해 어느 정도 이해하고 있는 친구들이라면 요소를 클릭하고 새 링크와 새 페이지로 이동하는 기능을 깨닫는 것이 매우 간단하다고 믿습니다. 예를 들어, 버튼을 클릭하여 점프하거나 텍스트에 하이퍼링크를 추가하는 등의 작업을 수행할 수 있습니다.
그래서 텍스트에 하이퍼링크를 추가하는 기능, 즉 텍스트의 특정 단락에 태그를 추가하는 기능은 초보자라도 익숙합니다. 그런 다음 a 태그에 이동하려는 새 주소를 추가하기만 하면 됩니다. 완전히 이해하지 못하더라도 조롱박을 따라가며 국자를 그리면 쉽게 사용할 수 있습니다.
그러나 일부 초보자는 텍스트 작성 방법을 알고 있다면 어떻게 HTML 이미지를 클릭하여 새 페이지로 이동하는 효과를 얻을 수 있습니까?라고 물을 수 있습니다. 사실 이는 여전히 텍스트에 하이퍼링크를 추가하는 것과 유사합니다. 이 글에서는 이미지를 클릭하여 새 페이지로 이동하는 HTML 기능을 구현하는 방법을 소개합니다.
아래에서는 간단한 HTML 코드 예제를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML点击图片跳转页面示例</title>
<style>
img{width: 80px ;
height: 80px
;}
</style>
</head>
<body>
<a href="http://www.php.cn"><img src="/test/img/2.png" alt="이미지를 클릭하여 새 페이지로 이동하는 HTML을 구현하는 방법은 무엇입니까? (예)" > </a>
</body>
</html>위 코드를 직접 복사하여 로컬 테스트에 붙여넣을 수 있습니다. 로컬 테스트의 효과는 다음과 같습니다.
스크린샷이므로 그럴 수 없습니다. 페이지를 클릭한 후 점프하는 모습을 볼 수 있지만 개인적으로 로컬에서 테스트해 보았는데 위의 그림을 클릭하시면 됩니다. 내가 지정한 새 링크 주소 "php Chinese website"로 이동합니다. a 태그에서 herf 뒤에 지정된 새 주소입니다. 이미지를 클릭하여 페이지로 이동하는 효과를 얻으려면 a 태그와 img 태그만 익히면 됩니다. img 이미지의 경로가 정확해야 합니다.
그러면 위 글을 통해 HTML의 이미지를 클릭하여 새 페이지로 이동하는 관련 정보를 소개하겠습니다. 그것이 모두에게 도움이 되기를 바랍니다.
위 내용은 이미지를 클릭하여 새 페이지로 이동하는 HTML을 구현하는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!