PHP：图像作为输入

Question

我想知道如何将图像作为表单输入，所以如果我点击图像1 ，它将突出显示并返回图像1的值表格。如果我点击图片2 ，也是如此。

请注意，图片不应该是某种帖子提交，更像是图片1＆amp;之间的表单选项。 2

HTML code section

<form>
    <img  src="http://pokeapi.co/media/img/18.png"    />
<img  src="http://pokeapi.co/media/img/2.png"  />

<input type="hidden" id="imgvalue" name="imgvalue" value="" />
<input type="submit" />
</form>

我目前没有代码，但我想看一个例子，所以我可以自己学习并自己动手。提前谢谢！

Answer 1

使用onclick事件创建两个图像 设置隐藏字段的值，该字段名为 img_value
提交后，您可以获得 img_value

的值

＆＃13;

＆＃13;

page.querySelector('#addInCarousel').onclick = function() {
     console.log("In function");
     var onsItem= document.createElement('ons-carousel-item');                       
     onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
     page.querySelector('#itemsCarousel').appendChild(onsItem);
}; 

＆＃13;

function set_value(me)
{
document.getElementById("img01").className = "unclicked";
document.getElementById("img02").className = "unclicked"; 
document.getElementById("img_value").value = me.id;
me.className = "clicked";
}

＆＃13;

.unclicked {
border: 1px solid black;
}
.clicked {
 border: 1px solid red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我希望这段代码可以帮到你，你可以通过javascript onclick事件访问图像src，更改类，并为特定类定义样式以突出显示图像

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img  src="http://pokeapi.co/media/img/18.png"    />
<img  src="http://pokeapi.co/media/img/2.png"  />

<input type="hidden" id="imgvalue" name="imgvalue" value="" />
<input type="submit" />
<style>
.active { 

 text-decoration:none;
    border:#CCC thin solid;
    padding: 4px;
background:#CCC;
 }
</style>
<script>
$(function(){
$('img').on('click',function(){
var value= $(this).attr('src');

$('#imgvalue').val(value);
$("img").removeClass("active");
$(this).addClass("active");
})
});
</script>

这里我使用活动类来突出显示图像，你也可以添加其他功能..