Я пытаюсь заставить изображение с 4 кнопками работать как 4 кнопки, сопоставленные с 4 различными функциями вместо гиперссылок по умолчанию (href = #).
Я хочу, чтобы пользовательские данные добавлялись, редактировались, удалялись или обновлялись на этой странице PHP вместо явных гиперссылок на разные страницы.
Даже если мне придется прибегнуть к другим страницам, эти данные необходимо отправить с помощью функций post или get и т. Д. Или с помощью собственной функции. Но проблема в том, что после сопоставления этого изображения с 4 разными кнопками и даже удаления href и добавления onclick = myfunction () ничего не происходит, и если я добавлю href, он не перейдет к myfunction после нажатия и вместо этого перейдет по ссылке href ,
пожалуйста помоги.
<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>
образ:
<!--list of users from mysql database (working good) --!>
но это должно выглядеть так:
<!--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="http://web-answers.org/wp-content/uploads/2019/02/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 — она просто не будет выполняться.
Других решений пока нет …