<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Jquery 이미지 오버 선택자 예제</title>
</head>
<body>
<div>
<ul id="img_btn">
<li><a href="#"><img src="/images/m_vis1_icon01.png" alt="이미지1" /></a></li>
<li><a href="#"><img src="/images/m_vis1_icon02.png" alt="이미지1" /></a></li>
<li><a href="#"><img src="/images/m_vis1_icon03.png" alt="이미지1" /></a></li>
</ul>
<script>
// 마우스 오버할때 다른 이미지 보이기
$(function() {
$("#img_btn li a img").hover(function(){
$(this).attr("src", $(this).attr("src").replace(".png", "_on.png"));
}, function(){
$(this).attr("src", $(this).attr("src").replace("_on.png", ".png"));
});
});
</script>
</div>
</body>
</html>
'프로그램개발 > ClientSide(JavaScript,Angular,Vue)' 카테고리의 다른 글
| contenteditable을 이용한 editor 만들기 (0) | 2022.02.09 |
|---|---|
| ‘앵귤러JS’ 11년 만에 종료··· “서드파티 지원 옵션은 사용 가능” (0) | 2022.01.12 |
| 오는 6월 승인될 ECMA스크립트 2021··· “문자열 및 프로미스 개선” (0) | 2021.04.02 |
| 자바스크립트로 익스플로러 버전 체크 (0) | 2021.03.18 |
| css - Internet Explorer에서 인쇄 된 페이지에서 머리글과 바닥 글을 제거하는 방법 (0) | 2021.03.15 |
