Question

它无法帮助我

<div id="d3">
<div class="button12" onclick="document.location='#'">Home</div>
<div class="button12" onclick="document.location='#'">About</div>
<div id="d1">
    <input type="button" value="Shrink" onclick="showLess()">
</div>

<script type="text/javascript">//<![CDATA[ 

var button = document.getElementById("button");
var d3 = document.getElementById("d3");
function showMore() {
    button.style.display="none";
    d3.style.display="block";
}

function showLess() {
    button.style.display="inline-block";
    d3.style.display="none";
}
//]]>  

</script>

如何更改

<input id="button" type="button" value="Expand" onmouseover="showMore()">

到

<img type="button" src="xxxxx.jpg" height="52" width="72" onmouseover="showMore()">

我应该在img标签中添加（id =“button”）吗？

Answer 1

您可以将输入用作图像。更多信息http://www.w3schools.com/tags/att_input_type.asp

它可能看起来像这样：

<input type="image" src="xxxxx.jpg" height="52" width="72" value="Expand" onmouseover="showMore()">

它将作为提交按钮。如果您不希望它在点击时提交，您可以使用 preventDefault 或返回false 。

Answer 2

您可以添加一些具有背景图像设置的类。像这样：

.myButton {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}

Answer 3

您可以使用replacewith

$('#button').replaceWith('<img />',{
type: button,
src: 'xxxxx.jpg',
height: 52,
width: 72
});

Answer 4

html中没有<img type="button" />这样的东西，但你可以：

创建

<input type="image" />

或创建

<button type="button"><img src="xxxxx.jpg" /></button>

或使用css添加背景图片

#button {
    background: url(xxxxx.jpg);
}

Answer 5

使用此

<img id="button" src="xxx.png" width="72" height="52" onmouseover="javascript:showMore();">

将<input />更改为<img/>标记

5 个答案: