Javascript/JQuery图像选择器
Javascript/JQuery Image Picker
我正在寻找JS/JQuery的方式来做以下事情1:显示一系列与"无"图像并排的油漆芯片2:点击芯片A:用边框高亮显示它已被选中B:将文本字段/可能隐藏字段的值更改为适当的颜色名称(所以图像应该标记为靛蓝,太阳等,并相应地更新)
我在Stackoverflow上找到了这篇文章,但是无法让它工作:jQuery图像选择器
下面是我基于上面链接的当前代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});
</script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" />
<img src="images/riverway.jpg" />
<img src="images/solaria.jpg" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
</body>
</html>
任何帮助将不胜感激!!!!
我最终解决了这个问题这是我使用的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" col="red" border="0" />
<img src="images/riverway.jpg" col="blue" border="0" />
<img src="images/solaria.jpg" col="yellow" border="0" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
<script>
$("div#image_container img").click(function () {
$("div#image_container img").attr("border","0");
$(this).attr("border","4");
$("input#image_from_list").val($(this).attr("col"));
});
</script>
</body>
</html>
我知道这个问题已经得到了解答,但是我开发了一个插件来解决这个问题,并且维护得很好。
http://rvera.github.com/image-picker/您的代码不能工作,因为您忘记将jquery语句包含在$(document)中。准备好了。更新后的代码可以工作,因为您将脚本块移到了底部,但技术上应该将其包含在document。ready
中。这是一个工作版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#image_container img').click(function(){
//remove border on any images that might be selected
$('#image_container img').removeClass("img_border")
// set the img-source as value of image_from_list
$('#image_from_list').val( $(this).attr("src") );
$('#data_value').val( $(this).attr("id") );
// $('#data_value').val( $(this).data("options").color );
//add border to a clicked image
$(this).addClass("img_border")
});
})
</script>
<style>
.img_border {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" id="vermillion"/>
<img src="images/riverway.jpg" id="riverway"/>
<img src="images/solaria.jpg" id="solaria"/>
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
<input id="data_value" type="text" value="" />
</form>
</body>
</html>
更新了我最后在问题中使用的代码,但这里也是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" col="red" border="0" />
<img src="images/riverway.jpg" col="blue" border="0" />
<img src="images/solaria.jpg" col="yellow" border="0" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
<script>
$("div#image_container img").click(function () {
$("div#image_container img").attr("border","0");
$(this).attr("border","4");
$("input#image_from_list").val($(this).attr("col"));
});
</script>
</body>
</html>
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 如何通过选择器元素将图像添加到javascript下拉警报消息中
- 如何将日期选择器放在图像图标上
- 显示从文件选择器中选择的图像的图像缩略图
- 为什么图像选择器程序中的这个函数 js 不起作用
- 图像未从文件选择器显示
- 解析 CSS 背景图像和选择器
- 单击图像后未显示日期选择器
- jQuery 选择器对应的图像和 li.
- 如何从谷歌选择器上传获取图像网址
- 我想根据需要设置图像大小,这是我的日期选择器脚本
- 为jquery图像缩放插件定义一个选择器
- jQuery日期选择器上一个和下一个按钮没有显示,如何指向css中的主题文件夹图像
- CSS或JQuery中的特定图像扩展选择器
- 基于CSS/Javascript的图像选择器
- 使用不带jQuery的javascript选择器来选择图像
- 日期选择器按钮图像未显示
- Javascript图像选择器:防止一次又一次地选择相同的图像
- 显示日期时间选择器上点击图像
- TinyMCE图像上传API不显示图像选择器图标