php 제이쿼리 질문이요

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
php 제이쿼리 질문이요

QA

php 제이쿼리 질문이요

본문

박스에 백그라운드로 사진을 깔아놓고

첫번째 버튼에 마우스를 올리면 백그라운드 사진이 바뀌게꿈 하려고 합니다

 

css에도 background-image로 깔아놧습니다.

 

$("버튼").eq(0).hover(function({

 $("박스").css("background-image", "../img/이미지")

});

 

이렇게 설정했는데 구현이 안되네요. ㅜㅜ 분명 로컬에선 잘됏는데... php파일은 뭐가 다른가요?? 

아니면 다른 방법으로 코드를 짜는게 나을까요..?

이 질문에 댓글 쓰기 :

답변 3

※ 문제점 ;

  - 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 을 사용할 수 없습니다..

 

답변을 작성하시기 전에 로그인 해주세요.
전체 72
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT