如何避免映射标签映射到超链接并调用 onclick 函数 instaed html php js

Question

我正在尝试制作一个 4 按钮图像作为映射到 4 个不同功能的 4 个按钮，而不是默认的 hyperlinks (href=#)。
我希望用户数据在此 PHP 页面中添加、编辑、删除或更新，而不是显式的 hyperlinks 到不同的页面。
即使我不得不求助于其他页面，这些数据也需要通过 post 或 get 等函数或一些自己的函数提交。但问题是，在将此图像映射为 4 个不同的按钮甚至删除 href 并添加 onclick=myfunction() 之后，它什么都不做，如果我添加 href，它不会在单击后转到 myfunction 并转到 href link 代替。
请帮忙

<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>

图片：

Answer 1

我会分几步回答。首先——你在第 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 部分等，以免打扰我自己。我希望你明白我做了什么。请记住，如果您在 javascript 中有错误 – 它不会执行。

如何避免映射标签映射到超链接并调用 onclick 函数 instaed html php js

how to avoid maps tag mapping to hyperlink and calling an onclick function instaed html php js

javascript

php

html

hyperlink

area