php 제이쿼리 질문이요
본문
박스에 백그라운드로 사진을 깔아놓고
첫번째 버튼에 마우스를 올리면 백그라운드 사진이 바뀌게꿈 하려고 합니다
css에도 background-image로 깔아놧습니다.
$("버튼").eq(0).hover(function({
$("박스").css("background-image", "../img/이미지")
});
이렇게 설정했는데 구현이 안되네요. ㅜㅜ 분명 로컬에선 잘됏는데... php파일은 뭐가 다른가요??
아니면 다른 방법으로 코드를 짜는게 나을까요..?
답변 3
$("버튼").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>
질문을 하실때에는 결과를 명확하게 전달해야 합니다.
구현이 안된다는는게 어떤것인지 답변자는 알수가 없습니다..
이미지가 엑박으로 나온다는건지 아니면 스크립트 자체가 실행되지 않는다는건지...
일단 F12 누르시면 콘솔탭에 오류가 있을거에요..
$.. 관련 오류라면 해당 페이지에 제이쿼리가 로드되지 않아서 그런것이므로 제이쿼리를 로드하셔야 하고
404 관련 오류라면 해당 위치에 이미지가 없어서 그런것이니 이미지 경로를 채크 해야 합니다.
그리고 php 파일에서도 HTML 문법이 사용 가능하지만 <?php ~~~~ 로 시작하는 내부에는
일반적인 문법으로 HTML 을 사용할 수 없습니다..