반응형
[JavaScript & jQuery] 제이쿼리를 사용하여 img 태그 src 변경하는 방법 !!
jQuery를 이용하여 특정 이벤트 발생 시 img 태그의 src를 변경하는 코드입니다 :)
$('img').attr('src', '이미지경로');예제코드
<!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>이미지 클릭</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
img {
width: 400px;
}
</style>
</head>
<body>
<h3>사진은 종이의집 배우 윤미선 / 이주빈씨입니다.</h3>
<img src="https://t1.daumcdn.net/thumb/R1024x0/?fname=http://t1.daumcdn.net/cafeattach/1WjuI/294c8ed1199e09a6b61d7b27045d6401e62f8906">
</body>
</html>
<script>
$(document).ready(function(){
$('img').click(function(){
$('img').attr('src', 'https://t1.daumcdn.net/news/202103/10/starnews/20210310060015605tepi.jpg');
});
});
</script>결과값
사진은 종이의집 배우 윤미선 / 이주빈씨입니다.
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] 자바스크립트를 활용하여 수학 수식 편집기 만드는 방법 !! (0) | 2023.05.16 |
|---|---|
| [JavaScript] 자바스크립트로 .ini 파일 읽기 & 불러오기 방법 !! (0) | 2023.05.09 |
| [JavaScript & jQuery] 제이쿼리로 input 텍스트 변경 시점 감지 및 찾는 방법 !! (2) | 2023.05.03 |
| [JavaScript] 자바스크립트로 마우스 클릭 게임(점 클릭 게임) 만들기 !! (0) | 2023.04.24 |
| [JavaScript] 자바스크립트 정규식으로 사진 확장자 제거 하는 방법 !! (0) | 2023.04.23 |
댓글