编程网页的建议，其中用户输入显示选定的图像

Advice on programming a webpage where user input displays a selected image

本文关键字：显示 输入 图像 用户 网页 编程      更新时间：2023-09-26

我正在寻找建立一个基本的网站，显示一个简单的选择标准(1下拉框，2个单选按钮集)当提交按钮被点击时，它打开一个弹出窗口，显示其位置由选择标准指定的图像。这个图像是随机更新的，所以弹出窗口需要刷新，或者至少每分钟获取并显示一个新图像。

我已经建立了一个简单的html网站(见下文)，显示图像，位于我的机器上，每30秒刷新一次。

<head>
   <meta http-equiv="refresh" content="30">
    <title>
    Real Time Image Display
    </title>
    <style>
     #geo img {
     max-width:100%; 
     max-height:100%;
     margin:auto;
     display:inline-block;
     vertical-align: middle;
     background-size: cover;
     }
    </style>
 </head>
 <body bgcolor=#00336>
    <div id="geo">
    <img src="file:///fileLocation/image.png" height="300" width="550"  alt=""> 
    </div>
</body>

我不相信这是最好的方法，我也不知道如何使用这个解决方案来完成我最初的任务，因为我不确定如何将选择标准传递给这些简单的html网站，以将它们指向正确的图像。

你知道我可以去哪里看或者我可以做什么吗?

首先，您需要为您的图像添加一个ID标记:

<img src="file:///fileLocation/image.png" id="imageToChange" height="300" width="550"  alt="">

然后你可以使用JavaScript来改变图像，而不需要刷新:

function changeImage() {
document.getElementById("imageToChange").src = "/newimage.png";
}

这是最基本的。应该注意的是，映像不应该像现在这样从本地文件系统中提取。它需要在服务器上。

这里有一个非常简单的小提琴来展示它是如何工作的:https://jsfiddle.net/durbnpoisn/r7fk8ubz/

相关文章：