Question

我正在点击替换背景图片，但它无效。这是我的HTML：

 <img id ='pet' src= 'http://ianon.info/pet_support/pic.png' height='200' width='200' style='border: 1px solid black'>;

这是我的JS + CSS：

 <input type="radio" name="field" value="4" onclick="document.getElementById('pet').style.border='30px solid transparent';document.getElementById('pet').style.border-image='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round'"/> Paw Print Frame &nbsp&nbsp&nbsp

我认为在“onclick”之后我的语法是一个问题。任何指针将不胜感激！

Answer 1

首先，您必须删除onClick上的代码。用功能替换它，它更清洁，更容易出错。

<input type="radio" name="field" value="4" onclick="doSomething()"/> Paw Print Frame &nbsp&nbsp&nbsp

然后你将拥有你的脚本，它可能是你在HTML末尾添加的外部javascript文件，或者你也可以使用<script></script>标签在这些文件之间编写JS。

<script>
function doSomething(){
    var petIMG = document.getElementById('pet');
    petIMG.style.border='30px solid transparent';
    petIMG.src='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round'
}
</script>

这种方式应该可行

Answer 2

JQuery非常简单和简短。单击单选按钮时替换背景图像。

<script>
    $(document).ready(function(){
        $("[name=field:radio]").click(function(){
            $("[id=pet]").css("border", "30px solid transparent").css("background-image", "url(http://ianon.info/pet_support/borders/pawprint.png) 120 round");
        });
    });
</script>

<img id='pet' src='http://ianon.info/pet_support/pic.png' height='200' width='200' style='border: 1px solid black'>

<input type="radio" name="field" value="4"/> Paw Print Frame &nbsp&nbsp&nbsp

Answer 3

您将图片呈现为HTML <img> element，但您尝试更改它，就像在CSS中将其设置为background-image一样。要渲染不同的图片，请更改img'src'属性。

即。改变：

document.getElementById('pet').style.backgroundImage='url(http://ianon.info/pet_su pport/borders/pawprint.png) 120 round';

为：

document.getElementById('pet').src = 'http://ianon.info/pet_support/borders/pawprint.png';

替换背景图像onclick

3 个答案: