Javascript/jQuery圖片選取器

我正在尋找JS/jQuery的方式做以下操作 1：與一個'無'圖像並排顯示一系列的油漆芯片 2：當點擊芯片時 A ：用邊框突出顯示它已被選中 B：將文本字段/可能是隱藏字段的值更改爲適當的顏色名稱（因此應該將圖像標記爲靛藍，日光等並相應更新）Javascript/jQuery圖片選取器

我發現了＃2這個職位，但無法得到它的工作：jQuery image picker

和這裏的基於上面的鏈接

<!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>

來源

2011-07-21 dscl

我不太清楚我得到你的問題是什麼，你能澄清嗎？ – Juan

我想顯示3個圖像 - 單擊圖像時，我希望更新表單域的值以反映該點擊。如果可能的話，當前圖像周圍的邊框也會很好。那有意義嗎？ – dscl

您的代碼不起作用，因爲您忘記將您的jquery語句放在$（document）.ready塊中。更新後的代碼的工作，因爲你感動的腳本塊的底部，但在技術上你應該括在的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>

來源

2011-07-21 02:21:22 Michal

非常感謝！我是一個JS/JQuery的新手，所以試圖從事例在線=） – dscl

更新我終於在這個問題中使用的代碼的代碼，但在這裏它也

<!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>

來源

2011-07-21 02:20:51 dscl

我知道這已經被回答，但我開發了一個插件，解決這個確切的問題，並很好地維護。

http://rvera.github.com/image-picker/

來源

2013-01-25 01:25:54 RVera

你的插件可以用來存儲圖像網址隱藏的表單字段作爲分隔的URL列表？在文檔中沒有提到這件事...... – dee

對不起，該插件沒有這樣做。 – RVera

當你想將html添加到標籤部分時，這個插件實際上並不工作。 –

Javascript/jQuery圖片選取器

回答

相關問題