하이퍼 링크로지도 태그 매핑을 피하고 onclick 함수를 호출하는 방법 html php js

기본 하이퍼 링크 (href = #) 대신 4 개의 다른 기능에 매핑 된 4 개의 버튼으로 작동하도록 4 버튼 이미지를 만들려고합니다.
내가 원하는 것은 다른 페이지에 대한 명시 적 하이퍼 링크 대신이 PHP 페이지 내에서 사용자 데이터가 편집되거나 삭제되거나 업데이트 된 것입니다.
다른 페이지를 사용해야 할지라도이 데이터는 게시물의 기능을 통해 제출되거나 기타 등등의 기능을 통해 제출되어야합니다. 하지만이 이미지를 4 개의 다른 버튼으로 매핑 한 다음 href를 제거하고 onclick = myfunction()을 추가하면 아무 것도 수행되지 않고 href를 추가하면 클릭 한 후 myfunction으로 이동하지 않고 대신 href 링크로 이동합니다. .
도와주세요.하이퍼 링크로지도 태그 매핑을 피하고 onclick 함수를 호출하는 방법 html php js

<html> 
<head> 
    <title>Panel 
    </title> 
    <?php 
    require('connect.php'); //working connection 
    $queryU = "SELECT username FROM `user`"; 
    $listU = $connection->query($queryU); 
    if ($listU->num_rows > 0) { 
     while ($rowu = $listU->fetch_assoc()) { 
      $y = $rowu['username']; //working script 
     } 
    } 
    ?> 
    <style> 
     body { 
      background-image : url("main.jpg"); 
      opacity   : 40%; 
      font-family  : AlphaMaleModern; 
      text-align  : center; 
      color   : #fff; 
      font-size  : 26px; 
     }  
     .a { 
      height : 90%; width : 45%; 
     } 

     .img { 
      margin-top : 20%; 
      position : relative; 
     }  
     .list { 
      float : right; 
      position : absolute; 
      border : lime solid; 
      width : 50%; 
      z-index : -1; 
      position : static; 
      top  : 10%; 
      height : 90%; 
     }  
     #userlist { 
      width  : 100%; 
      opacity  : 0.8; 
      font-family : AlphaMaleModern; 
      text-align : center; 
      font-size : 28px; 
      height  : 100%; 
     }  
     .img:hover, #userlist:hover { 
      opacity : 1; 
     } 
    </style> 
    <script> 
     //test function 1 for on click call but not working 
     document.getElementById('aa').on(click, function (e) { 
       e.preventDefault(); 
       alert("CLICKED"); 
      } 
     ); 
     //test function 2 for on click call but not working 
     function printr(ss) { 
      var x = document.getElementById('ss').name; 
      alert(x); 
      switch (x) { 
       case "aa": 
        alert("AA"); 
        break; 
       case "b": 
        alert("B"); 
        break; 
       case "c": 
        alert("C"); 
        break; 
       case "d": 
        alert("D"); 
        break; 
      } 
    </script> 
</head> 
<body> 
<fieldset name="Users" class="a" style="float:right;"> 
    <legend>USERS 
    </legend> 
    <div id="user" class="user" style=""> 
     <img src="panel/panel.png" class="img" alt="" usemap="#Map1"/> 
     <map name="Map1" id="Map1"> 
      <area alt="" title="" href="#" id="aa" onclick="printr(aa)" 
        shape="poly" coords="200,8,16,10,104,108"/> 
      <area alt="" title="" href="#" id="b" onclick="printr(b)" 
        shape="poly" coords="205,14,108,109,204,197"/> 
      <area alt="" title="" href="#" id="c" onclick="printr(c)" 
        shape="poly" coords="8,201,98,110,8,15"/> 
      <area alt="" title="" href="#" id="d" onclick="printr(d)" 
        shape="poly" coords="104,113,16,208,204,207"/> 
     </map> 
     <div class="list"> 
      <select id="userlist" size="20"> 
       <option> 
        <?php echo $y; ?> 
       </option> 
       <!--list of users from mysql database (working good)--> 
      </select> 
     </div> 
</fieldset> 
</div> 
</body> 
</html>

이미지 :

출처

2017-05-06 ROY

내가 몇 단계에 답변 해 드리겠습니다. 먼저 98 행의 html 블록 주석이 잘못되었습니다. 그것은이다 :

<!--list of users from mysql database (working good) --!>

있지만해야한다은 다음과 같습니다

을 때문에 폐쇄가 잘못 코멘트 (종료되지 않은) - 모든 라인을 그 의견에 따라 또한 댓글을 달았습니다.

function printr(ss)가 (가) 닫히지 않았습니다. 마지막 }은 마감일이 switch입니다.
onclick="printr('aa')" 대신 onclick="printr(aa)"을 입력하셨습니다. ' 대괄호가 없으면 함수 인수가 존재하지 않는 변수 aa을 제공하고 있습니다. 대괄호를 사용하면 문자열 만 입력하면됩니다. 코드의

내 버전 :, 모든 경우에 적용 할 수있는 명확한 코드는 아니지만, 지금 일하고있어

<html> 
    <head> 
    <title>Panel 
    </title> 

    <style> 
     body{ 
     background-image: url("main.jpg"); 
     opacity:40%; 
     font-family: AlphaMaleModern; 
     text-align:center; 
     color:#fff; 
     font-size: 26px; 
     } 
     .a{ 
     height:90%; 
     width:45%; 
     } 
     .img{ 
     margin-top:20%; 
     position:relative; 
     } 
     .list{ 
     float:right; 
     position:absolute; 
     border:lime solid; 
     width:50%; 
     z-index:-1; 
     position:static; 
     top:10%; 
     height:90%; 
     } 
     #userlist{ 
     width:100%; 
     opacity: 0.8; 
     font-family:AlphaMaleModern; 
     text-align:center; 
     font-size:28px; 
     height:100%; 
     } 
     .img:hover,#userlist:hover{ 
     opacity: 1; 
     } 
    </style> 
    <script> 
     function printr(ss) 
     { 
      switch (ss) 
      { 
       case "aa": 
       alert("AA"); 
       break; 
       case "b": 
       alert("B"); 
       break; 
       case "c": 
       alert("C"); 
       break; 
       case "d": 
       alert("D"); 
       break; 
      } 
     } 
    </script> 
    </head> 
    <body> 
    <fieldset name="Users" class="a" style="float:right;"> 
     <legend>USERS 
     </legend> 
     <div id="user" class="user" style=""> 
     <img src="https://i.stack.imgur.com/7A0Ky.png" class="img" alt="" usemap="#Map1" /> 
     <map name="Map1" id="Map1"> 
      <area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" /> 
      <area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" /> 
      <area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" /> 
      <area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" /> 
     </map> 
     <div class="list" > 
      <select id="userlist" size="20"> 
      <option> 

      </option> 
      <!--list of users from mysql database (working good) --> 
</select> 
</div> 
</fieldset> 
</div> 
</body> 
</html>

https://jsfiddle.net/9ks9kxzw/

. 그건 그렇고 - 나는 자신을 방해하지 않도록 PHP 섹션 등을 제거했습니다. 내가 한 일이 무엇인지 이해하기를 바랍니다. 자바 스크립트에서 오류가 발생하면 실행되지 않습니다.

출처

2017-05-06 07:47:38 Sylogista

오류 제거를 위해 노력해 주셔서 감사합니다. 오류 제거 후에도 주요 질문은 동일하게 유지됩니다. 나는 스크립트의 시작 부분에서 JS의 간단한 alert() 호출을 테스트했지만 작동하지 않는 이미지 매핑에서 onclick()을 호출했습니다. 도와주세요!! – ROY

하나 또는 두 개의 버그를 열거하지 않았을 가능성이 있습니다. 모든 것이 jsfiddle에서 작동하는지 확인 했습니까 (답변 끝 부분의 링크)? 나를 위해 그것은 모든 브라우저에서 작동합니다. – Sylogista

왼쪽 문제는 실제로 실행을 방해하는 코드에서 몇 줄을 제거했다는 것입니다. 이들은 다음과 같습니다 : – ROY

하이퍼 링크로지도 태그 매핑을 피하고 onclick 함수를 호출하는 방법 html php js

답변

관련 문제