php 제이쿼리 질문이요
본문
박스에 백그라운드로 사진을 깔아놓고
첫번째 버튼에 마우스를 올리면 백그라운드 사진이 바뀌게꿈 하려고 합니다
css에도 background-image로 깔아놧습니다.
$("버튼").eq(0).hover(function({
$("박스").css("background-image", "../img/이미지")
});
이렇게 설정했는데 구현이 안되네요. ㅜㅜ 분명 로컬에선 잘됏는데... php파일은 뭐가 다른가요??
아니면 다른 방법으로 코드를 짜는게 나을까요..?
답변 2
$("버튼").eq(0).hover(function() {
$("박스").css("background-image", "url('/img/이미지.jpg')"); //web root 기준 경로
});
※ 문제점 ;
- hover 함수의 콜백 함수에 괄호가 맞지 않아 문법 오류.
- CSS의 background-image는 경로 앞에 url()이 필요.
- 이미지의 경로를 정확히 설정.
<div class="박스">
<!-- 배경 이미지가 적용될 박스 -->
</div>
<button class="버튼">버튼</button>
/* 초기 배경 이미지 설정 */
.박스 {
width: 300px; /* 원하는 크기로 설정하세요 */
height: 200px; /* 원하는 크기로 설정하세요 */
background-image: url('../img/초기이미지.jpg'); /* 초기 배경 이미지 */
background-size: cover;
background-position: center;
}
$(document).ready(function() {
$(".버튼").eq(0).hover(
function() {
$(".박스").css("background-image", "url('../img/변경이미지.jpg')");
},
function() {
$(".박스").css("background-image", "url('../img/초기이미지.jpg')");
}
);
});
이렇게 햇는데 사진이 아니라 흰화면으로 뜨면 어떡해야하나요 ㅜㅜ 분명 경로가 맞는데 안뜨네요
경로를 넣으실때 ~
background-image의 URL 경로를 HTML 파일과 같은 위치 기준에서
상대경로로 설정하여 보세요 ~
> 즉, 구현을 하는 파일 기준 상대경로 -
jQuery 라이브러리 연결확인 하시고 ~
JS 파일이 제대로 연결되지 않으면 jQuery 코드가 동작하지 않습니다.
JS 코드는 구현하는 파일의 끝 부분에 위치시키세요.
계발도구 콘솔에서 이미지 파일 오튜가 있는 지 확인 하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경 이미지 변경 예제</title>
<style>
.박스 {
width: 300px;
height: 200px;
background-image: url('/img/초기이미지.jpg');
background-size: cover;
background-position: center;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.버튼 {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="박스"></div>
<!-- 버튼 -->
<button class="버튼">버튼</button>
<!-- jQuery 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(".버튼").eq(0).hover(function() {
$(".박스").css("background-image", "url('/img/이미지.jpg')");
});
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.