  < img id="photo" src="images/home.png" width="90%" onmouseenter="mouseEnterPhoto();" onmouseleave="mouseLeavePhoto();" >

이 부분이 약간 이해가 안됩니다.

img태그에 id photo를 줬는데 그 중에서도 src가 images/home.png 인 img에만 photo라는 id를 준게 아닌가요? 그래서 다른 src값을 가지고 있는 seoul, tokyo, paris에도 같은 mouseEnter와 mouseLeave 효과가 적용되는 이유가 궁금합니다!

<!DOCTYPE html>
<html>
<head>
  <title>Travel Website</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img id="logo" src="images/travel_logo.png" width="165" height="58">

  <div id="menu">
    <a id ='home' onclick="clickHome();">Home</a>
    <a id ='seoul' onclick="clickSeoul();">Seoul</a>
    <a id ='tokyo' onclick="clickTokyo();">Tokyo</a>
    <a id ='paris' onclick="clickParis();">Paris</a>
  </div>

*******  <img id="photo" src="images/home.png" width="90%" onmouseenter="mouseEnterPhoto();" onmouseleave="mouseLeavePhoto();">*******
  
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
  </script>
 

  <script>
    // 사진을 바꿔주는 함수
    function clickHome() {
        $('#photo').attr('src','images/home.png');
        $('#home').css('font-weight','bold');
        $('#seoul').css('font-weight','normal');
        $('#tokyo').css('font-weight','normal');
        $('#paris').css('font-weight','normal');
    }

    function clickSeoul() {
        $('#photo').attr('src','images/seoul.png');
        $('#home').css('font-weight','normal');
        $('#seoul').css('font-weight','bold');
        $('#tokyo').css('font-weight','normal');
        $('#paris').css('font-weight','normal');
    }

    function clickTokyo() {
        $('#photo').attr('src','images/tokyo.png');
        $('#home').css('font-weight','normal');
        $('#seoul').css('font-weight','normal');
        $('#tokyo').css('font-weight','bold');
        $('#paris').css('font-weight','normal');
    }
    
    function clickParis() {
        $('#photo').attr('src','images/paris.png');
        $('#home').css('font-weight','normal');
        $('#seoul').css('font-weight','normal');
        $('#tokyo').css('font-weight','normal');
        $('#paris').css('font-weight','bold'); 
    }
      function mouseEnterPhoto(){
          $('#photo').css('box-shadow', '5px 10px');
      }`inline code`
      function mouseLeavePhoto(){
          $('#photo').css('box-shadow','none');
      }`inline code`
  </script>
</body>
</html>