我试图在单击图片时弹出警报
[英]I am trying to make an alert pop up when I click on the picture
问题描述
I am trying to make it so when you click on each image in the html you recieve an alert telling you what each picture is.
我正在努力做到这一点，当您单击 html 中的每个图像时，您会收到一条警报，告诉您每张图片是什么。
<html lang="en">
<head>
<title>Task 2</title>
</head>
<body>
<img id="blackcircle" src="31NXhN9iZoL._AC_SY355_.jpg" height="200" width="250"
onMouseClick="eventOne()"/>
<img id="redtriangle"src="1200px-Red_triangle_with_thick_white_border.svg.png"
height="200" width="250" onMouseClick="eventTwo()"/>
<img id="bluesquare"src="download.png" id="jamaica" height="200" width="250"
onMouseClick="eventThree()"/>
<script>
var myImages = [
"31NXhN9iZoL._AC_SY355_.jpg",
"1200px-Red_triangle_with_thick_white_border.svg.png",
"download.png",
];
function eventOne()
{
alert("You have clicked on the black circle");
}
function eventTwo()
{
alert("You have clicked on the red triangle");
}
function eventThree()
{
alert("You have clicked on the blue square");
}
</script>
</body>
The images I used were just random ones I pulled from the web but did not go back in to rename them yet.我使用的图像只是我从网上提取的随机图像，但还没有回去重命名它们。
2 个解决方案
解决方案1
0 2021-11-12 18:05:03
The event handler is called onclick not onMouseClick . 事件处理程序被称为onclick而不是onMouseClick 。
function eventOne() { alert('You have clicked on the black square'); } function eventTwo() { alert('You have clicked on the red square'); } function eventThree() { alert('You have clicked on the blue square'); }
<img src="https://dummyimage.com/100x100/000/fff" onclick="eventOne()" /> <img src="https://dummyimage.com/100x100/ff0000/000" onclick="eventTwo()" /> <img src="https://dummyimage.com/100x100/0000ff/000" onclick="eventThree()" />
解决方案2
0 2021-11-12 18:35:11
I changed a little your code and tested it here.我稍微更改了您的代码并在此处进行了测试。
Try it now like this:现在像这样尝试：
<html lang="en">
<head>
<script>
var myImages = [
"31NXhN9iZoL._AC_SY355_.jpg",
"1200px-Red_triangle_with_thick_white_border.svg.png",
"download.png",
];
function eventOne()
{
alert("You have clicked on the black circle");
}
function eventTwo()
{
alert("You have clicked on the red triangle");
}
function eventThree()
{
alert("You have clicked on the blue square");
}
</script>
<title>Task 2</title>
</head>
<body>
<img id="blackcircle" src="31NXhN9iZoL._AC_SY355_.jpg" height="200" width="250" onclick ="eventOne()"/>
<img id="redtriangle"src="1200px-Red_triangle_with_thick_white_border.svg.png" height="200" width="250" onmouseup="eventTwo()"/>
<img id="bluesquare" src="download.png" height="200" width="250" onclick="eventThree()"/>
</body>
The mouseup event fires when the user releases the mouse button. mouseup 事件在用户释放鼠标按钮时触发。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.