Question

我正在尝试制作可点击的图片，当您点击它时，它应该显示在下一页上。所以我有3个模板，当你点击模板1时，它应该自动进入另一个应该显示某个图片的页面。如果单击模板2，则应显示pci2。如果单击模板3，则应显示图片3。有人可以帮我做吗？

现在我有了这个：

<form action="getTemp.php" method="get">
        <center><h2>Chose your template</h2></center>

        <label>Template 1 </label>
        <img src="img/button-icons-1.png" name="slika" id="temp1" alt="template1" width="600" height="300">

        <label>Template 2 </label>
        <img src="img/button-icons-2.png" name="slika" id="temp2" alt="template1" width="600" height="300">

        <label>Template 3 </label>
        <img src="img/button-Icons-3.png" alt="template1" id="temp3" name="slika" width="600" height="300">


    </div>

首先，我需要让可点击的图片提交。

接下来我想我需要拿起点击图片的ID。根据单击的图片，显示某张图片。所以我想可能会使用if-else / switch。但有人可以帮我怎么做？

Answer 1

两个选项：

仅限HTML：

为每个图像创建一个表单，在每个表单中添加一个额外的隐藏输入参数，其中包含您要提交的ID。添加onclick =＆＃34; document.getElementById（＆＃39; idOfTheForm＆＃39;）。submit（）＆＃34;到图像标签。

使用Javascript：

向表单添加隐藏的输入参数。添加onclick =＆＃34; mySubmitForm（imageId）＆＃34;你的所有图像。

function mySubmitForm(imageId){
    document.getElementById('idOfHiddenInput').value = imageId;
    document.getElementById('idOfTheForm').submit();
}

Answer 2

我不明白为什么这需要基于你上面的HTML的js或表格。

而不是使用表单（因为看起来你的图像是你唯一要传递到下一页的东西），为什么不只是使用一个链接并在get字符串上传递一个参数（作为你的表单）反正是一个得到的？）

例如

<h2 style="text-align:center">Chose your template</h2>  <!-- remove center tags - they are obsolete -->:


<label>Template 1</label>
<a href="getTemp.php?template=template1"><img src="img/button-icons-1.png" name="slika" id="temp1" alt="template1" width="600" height="300"></a>

<label>Template 2</label>
<a href="getTemp.php?template=template2"><img src="img/button-icons-2.png" name="slika" id="temp2" alt="template1" width="600" height="300"></a>

<label>Template 3</label>
<a href="getTemp.php?template=template3"><img src="img/button-Icons-3.png" alt="template1" id="temp3" name="slika" width="600" height="300"></a>

然后在你的php中你可以测试get var并根据传递的模板设置你的图像

点击它后如何获得正确的图片

2 个答案: