在表单中突出显示所选图像-使用Jquery?
我在谷歌上搜索了答案,找到了nada,所以即使是一个显示如何做以下事情的页面链接也会非常感激 基本上我有一个只有图像的表单在表单中突出显示所选图像-使用Jquery?,jquery,html,image,forms,highlight,Jquery,Html,Image,Forms,Highlight,我在谷歌上搜索了答案,找到了nada,所以即使是一个显示如何做以下事情的页面链接也会非常感激 基本上我有一个只有图像的表单 <form> <input type="image" src="image.jpg" value="image_value"> <input type="image" src="image2.jpg" value="image_value2"> </form> 我希望能够以某种方式突出显示用户选择的图像。当用户单击图像1
<form>
<input type="image" src="image.jpg" value="image_value">
<input type="image" src="image2.jpg" value="image_value2">
</form>
我希望能够以某种方式突出显示用户选择的图像。当用户单击图像1时,即使只是图像1周围的一个轮廓也是完美的
我已经在这个项目上使用了Jquery,因此如果有Jquery解决方案,它将是最方便的。以下内容将在单击时为每个图像输入一个1px边框和10px填充,但理想情况下,您应该给它们一个类,以类似的方式作为目标:
$(“.imgs2higlight”).bind()
类似于以下的东西应该可以工作,但是您可以使样式CSS类更容易地更改样式
$("input[type='image']")
.focus(function() { $(this).css("border","solid 1px #f00"); })
.blur(function() { $(this).css("border","0"); });
差不多
CSS:
javascript:
$(function() {
$("input[type=image]").click(function(){ $(this).addClass('selected'); });
});
更新:请参阅。他的情况好多了。
在HTML中,
只是一个提交按钮,其正面是一个图像。我认为那不是你想要的。您可能需要一个实际图像的列表,单击该列表时,会根据“数据值”属性设置隐藏的表单值。因此,您的HTML应该如下所示:
<form id="select-form">
<img src="image.jpg" data-value="image_value">
<img src="image2.jpg" data-value="image_value2">
<input type="hidden" id="image-value" name="selected_image" value="">
</form>
$('#select-form img').click(function() {
// Set the form value
$('#image-value').val($(this).attr('data-value'));
// Unhighlight all the images
$('#select-form img').removeClass('highlighted');
// Highlight the newly selected image
$(this).addClass('highlighted');
});
最后,为CSS文件中的highlight类设置一些样式:
img.highlighted {
border: 2px solid blue;
}
一种方法是设置单选按钮标签的样式,使其行为类似于图像选择:
<form action="#" method="post">
<input type="radio" class="radio" name="example" id="ex1" value="ex1" checked />
<label for="ex1" class="label">Example 1</label>
<input type="radio" class="radio" name="example" id="ex2" value="ex2" />
<label for="ex2" class="label">Example 2</label>
</form>
下面是一个实际的例子:
这还有一个额外的好处,就是不依赖jQuery(甚至不依赖javascript) 非常感谢,我不知道数据的价值<代码>数据值不是什么特别的东西,它只是一个自定义属性。按照惯例(在HTML5中),自定义属性以
data-
开头,但其余属性可以是任何内容。我选择了数据值
,但数据名称
或数据无论什么
也可以。请参阅以了解更多详细信息。显然,在HTML5中没有添加该内容,谢谢链接!我想投你的赞成票,但我还没有足够的支持率@肖恩,怎么不成功?也许我误解了你的意图。你想要一个表单,人们可以从一组图像中进行选择,对吗?它突出显示了他们选择的那个。如果这是您想要的,那么这段代码应该可以工作。@Sean,它不能工作,因为您将代码放在一起的方式有很多问题:您没有包括jQuery,您没有将单击处理程序放在$(文档)中。就绪,并且您没有为样式块分配类型。我在这里纠正了这些问题:作为拥有当前公认答案(我5年前写过!)的人,我同意这是一个更好的解决方案,应该是公认的答案。因为我无法控制我答案的可接受性,所以我更新了我的答案,用一个大黑体字指向你的答案。(直到现在我才注意到这个答案)我已经把它改成了公认的答案!谢谢:)为了更好的衡量,我总是添加overflow:hidden代码>。查看CSS-Tricks.com上的
img.highlighted {
border: 2px solid blue;
}
<form action="#" method="post">
<input type="radio" class="radio" name="example" id="ex1" value="ex1" checked />
<label for="ex1" class="label">Example 1</label>
<input type="radio" class="radio" name="example" id="ex2" value="ex2" />
<label for="ex2" class="label">Example 2</label>
</form>
.radio {
opacity: 0;
position: absolute;
}
.label {
background: url(http://i.imgur.com/mW6xr2I.png);
text-indent: -999em;
border: 10px solid white;
width: 126px;
height: 126px;
display: block;
float: left;
margin: 10px;
}
input[type="radio"]:checked + label {
border: 10px solid orange;
}