选择选项可更改图像的不透明度

select option to change image opacity

本文关键字：不透明度 图像 可更改 选项 选择      更新时间：2023-09-26

我需要一些关于选择选项的帮助。我有一个选择下拉列表，当选择或更改时，我需要图像不透明度从0.3变为1，但不能使用预定义的选项值。有人能帮忙吗？

这是（坏的）脚本：

<script type="text/javascript">
window.onload = function() {
document.getElementById('input_25_custom_1011_0').onchange = img }
function img(){
if (document.getElementById('input_25_custom_1011_0').selected == true ){
document.getElementById('id_46').style.opacity = "1"; }
else { 
document.getElementById('id_46').style.opacity = "0.3"; }
}
</script>

以及相关的html:

<img alt="" class="form-image" border="0" src="http://www.jotform.com/uploads/TeckStyle/form_files/frame.png" height="334" width="225" />
      <select class="form-dropdown validate[required]" name="q25_input25[special_1011][item_0]" id="input_25_custom_1011_0">
        <option value="Standard"> Standard </option>
        <option value="Standard &amp; Rider 1"> Standard &amp; Rider 1 </option>
        <option value="Standard &amp; Rider 2"> Standard &amp; Rider 2 </option>
        <option value="Standard, Rider 1 &amp; 2"> Standard, Rider 1 &amp; 2 </option>
      </select>

编辑：更新和校正的输入元素。

我认为这部分：if（document.getElementById（'put_25_custom_1011_0'）.selected==true）｛

需要定义选择哪个选项。。。

添加img id[id="id_46"]

使用选择标签的id更新您的窗口加载功能

[window.onload=函数（）{document.getElementById（'put_25_custom_1011'）.ochange=img}]

  <img alt="" id="id_46" class="form-image" border="0" src="http://www.jotform.com/uploads/TeckStyle/form_files/frame.png" height="334" width="225" />
        <select class="form-dropdown validate[required]" name="q25_input25[special_1011][item_0]" id="input_25_custom_1011_0">
          <option value="Standard"> Standard </option>
          <option value="Standard &amp; Rider 1"> Standard &amp; Rider 1 </option>
          <option value="Standard &amp; Rider 2"> Standard &amp; Rider 2 </option>
          <option value="Standard, Rider 1 &amp; 2"> Standard, Rider 1 &amp; 2 </option>
        </select>
</body>
  <script type="text/javascript">    
    window.onload = function() {
document.getElementById('input_25_custom_1011_0').onchange = img }
function img(){
if (document.getElementById('input_25_custom_1011_0').selected == true ){
document.getElementById('id_46').style.opacity = "1"; }
else { 
document.getElementById('id_46').style.opacity = "0.3"; }
}

</script>

如果您使用的是jQuery，您也可以使用以下脚本

$("#input_25_custom_1011_0").on("change",function(){      
   $("img" ).fadeTo( "slow" , 0.3, function() {
      // Add your animation logic here.         
     // Animation done.
  });      
});

获取img（）函数的ID不正确。在window.load上，没有ID为input_25_custom_1011的元素。

检查一下这把小提琴。http://jsfiddle.net/tqdjshae/

我用input_25_custom_1011替换了select标签上的ID，它就工作了。

相关文章：