Question

如何使用javascript更改图片

<script>
colorurlMap {

"img 1" : "images/img1.jpg",
"img 2" : "images/img2.jpg",
ect.
}    

function 

</script>

我还会添加以下功能以使图像也发生变化？编辑*** NEVERMIND我发现它............以下工作完美...再次感谢

 function mouseEnter(el) {
    var img = document.getElementById('basehood');
    var asrc = document.getElementById('imgLink');
    var color = el.getAttribute("data-color");
    img.src = colorUrlMap[color];
    asrc.href = colorUrlMap[color];
}

<a id="imgLink" href="SAME AS IMG SRC(images/myimg.jpg)"><img id="basehood" src="images/myimg.jpg"> </a>



<div style='width: 65px; height:100px; padding: 5px 8px 5px 8px; float: left;'> 
<label for='". $row['uniqueID'] ."' style='cursor:pointer;'> 
<img class='inputbox' src='". $row['color_img'] ."' alt='". $row['color_name'] ."' width='60' height='auto'>
<p class='colorpallet'>". $row['color_name'] ."</p> 
</label>
<input class="inputbox" id="'. $row['uniqueID'] .'" type="radio" name="finish" onmouseenter="document.getElementById('basehood).src = colorUrlMap[this.value];" value="'. $row['color_value'] .'" onClick="this.form.submit()" style="display:none; cursor:pointer">

在此先感谢，非常感谢您的帮助！

Answer 1

没有理由让隐藏元素尝试在其上触发鼠标事件。如果它被隐藏，它不会得到事件。（虽然JS在技术上可以在一个元素上使用事件，例如div，导致事件在另一个元素<input type=radio />上触发，但这是一个令人困惑且不好的解决方案。）你还没有提到，如果你试图用你继承的代码来完成这项工作，你就没有提到，但目前我不会假设这一点。

我建议完全采用不同的方式。我只是因为你需要<input type=radio />字段来保存value，所以你可以从$row['color_value']获取img网址，因此我猜测“你被卡住了”colorurlMap。

我将首先发布代码解释更改：

<script>
    colorurlMap {
        "img 1" : "images/img1.jpg",
        "img 2" : "images/img2.jpg" //,
        //...
    }

    function mouseEnter(el) {
        var img = document.getElementById('basehood');
        var color = el.getAttribute("data-color");
        img.src = colorUrlMap[color];
    }

    function mouseClick(el) {
        var color = el.getAttribute("data-color");
        var hiddenField = document.getElementById("<?php $row['hiddenID']; ?>");
        hiddenField.value = color;
        el.form.submit();
    }
</script>

<img id="basehood" src="images/myimg.jpg">

<div data-color='<?php $row['color_value']; ?>' onmouseenter='mouseEnter(this)' onclick='mouseClick(this)' style='width: 65px; height:100px; padding: 5px 8px 5px 8px; float: left;'> 
    <label style='cursor:pointer;'> 
        <img class='inputbox' src='<?php $row['color_img']; ?>' alt='<?php  $row['color_name']; ?>' width='60' height='auto'>
        <p class='colorpallet'><?php  $row['color_name']; ?></p> 
    </label>
</div>

<input type="hidden" id='<?php $row['hiddenID']; ?>' name="finish" value="" />

1）我在data-上使用div属性。（Using data attributes）简短版本是data-属性是一种常见且受到良好支持的HTML技术。您可以在mouseEnter函数中看到我使用el.getAttribute来获取div上data-color属性的值。如果您使用的是jQuery，则可以使用.data()之类的var color = $(el).data("color");函数。

2）我还完全删除了<input type=radio />，并将onmouseenter和onclick函数放在div上。

3）我代替收音机，添加了<input type=hidden />来保存所选的颜色值。您可以为表单设置一个隐藏字段（而不是几个无线电），并且在用户点击div时设置它的值，就在提交表单之前。

仅限javascript - 通过将鼠标悬停在隐藏的单选按钮上来更改图像

1 个答案: