JavaScript의 HTML 이미지 태그에 Onclick 이벤트 추가
onclick은 HTML 내부의 이미지 태그 위에 추가됩니다. onclick 이벤트는 이미지를 클릭 가능하게 만듭니다. 사용자가 이미지를 클릭하면 새 웹 페이지 열기, 애니메이션 추가, 기존 이미지를 새 이미지로 변경 등과 같이 원하는 모든 작업을 수행할 수 있습니다. onclick 내부에서 함수를 전달할 수 있습니다. 여기에서 JavaScript로 작성한 함수를 생성 및 호출하거나 window.open()과 같은 창 객체에서 사용할 수 있는 기존 함수를 사용할 수 있습니다.
이 기사는 사용자가 onclick 이벤트를 사용하여 이미지를 클릭할 때 새 브라우저 탭에 이미지를 표시하는 방법을 보여줍니다. 함수를 생성하고 HTML 이미지 태그의 oncreate 속성 내에서 호출하여 이를 달성할 것입니다.
JavaScript를 사용하여 HTML img 태그에 onclick 이벤트 추가
JavaScript에서 onclick 이벤트 기능을 구현하려면 먼저 함수를 만든 다음 HTML 내부의 이미지 태그에 있는 onclick 내부에서 해당 함수를 호출해야 합니다. 여기에서는 이미지를 촬영했으며 사용자가 이 이미지를 클릭하면 이미지가 새 브라우저 탭에서 열립니다. 아래 예제에서 이것을 구현할 것입니다.
아래에는 서버에서 가져온 이미지로 설정된 src 속성이 있는 img 태그만 있는 기본 HTML 문서가 있습니다. 이미지의 onclick 속성에서 openImg() 함수를 전달하여 해당 함수를 호출합니다. 아직 이 함수를 만들지 않았습니다. 파일 끝에서 JavaScript 파일을 연결하여 함수를 생성했습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Image taken from Unsplash -->
<img id="image" src="https://bit.ly/3jFwe3d" onclick="openImg()">
<script src="./script.js"></script>
</body>
</html>
위의 코드를 실행하면 웹 브라우저에서 이런 모습이 됩니다.
JavaScript 파일 내에서 openImg() 함수를 정의했습니다. 이 함수 내에서 먼저 id 속성 image를 사용하여 DOM 내부에 있는 img 태그에 대한 참조를 가져와야 합니다. 이것은 document.getElementById() 메소드를 사용하여 수행할 수 있습니다. 그런 다음 image 변수 안에 이미지 태그의 참조를 저장합니다.
새 브라우저 탭에 동일한 이미지를 표시하고 싶기 때문에 src 속성을 사용하여 얻을 수 있는 변수에 이미지 소스도 저장해야 합니다. JavaScript에서는 image.src를 사용하여 소스 속성에 액세스하기만 하면 됩니다. 그런 다음 source 변수 안에 저장합니다.
마지막으로 소스를 사용하여 이미지를 표시하려면 window.open() 메서드를 사용할 수 있습니다. window.open() 메소드는 새 탭을 여는 데 사용되며 이 함수 내부에 전달하는 모든 내용은 새 탭 내부에 표시됩니다. 여기에서 이미지 자체의 링크가 포함된 소스 변수를 전달합니다. 이것이 JavaScript openImg() 함수의 모양입니다.
function openImg() {
var image = document.getElementById('image');
var source = image.src;
window.open(source);
}
웹 브라우저 내에서 위의 코드를 실행하고 이미지를 클릭하면 아래와 같이 이미지가 새 브라우저 탭에서 열립니다.
HTML onclick 이미지 속성은 JavaScript에서 이미지를 클릭할 수 있도록 도와줍니다. 이것은 다양한 상황과 웹사이트에 구현하려는 기능의 종류에 따라 사용할 수 있습니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn관련 문장 - JavaScript Image
- HTML Canvas를 사용하여 JavaScript에서 이미지 자르기
- JavaScript를 사용한 페이드인 이미지
- JavaScript에서 마우스를 가져갈 때 이미지 변경
- JavaScript의 URL에서 이미지 로드
- JavaScript 미리로드 이미지