CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dev Kumar
Dev Kumar

Reputation: 31

Change <input> to <img> tag

Check here http://jsfiddle.net/FYqq2/

its not working help me 

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

How can I Change

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

To

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

should i add (id="button") in img tag?

Upvotes: 0

Views: 304

Answers (5)

Satish Sharma
Satish Sharma

Reputation: 9635

use this

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

Upvotes: 0

Vygandas Pliasas
Vygandas Pliasas

Reputation: 192

you can use input as image. More info http://www.w3schools.com/tags/att_input_type.asp

it could look somethin like this:

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

It will act as submit button. You can use preventDefault or return false if you don't want it to submit on click.

Upvotes: 2

pwolaq
pwolaq

Reputation: 6381

there is no such thing as <img type="button" /> in html, but you can:

create 

<input type="image" />

or create 

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

or use css to add background-image

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

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85565

You can use replacewith

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can add some class which has background image set to it. Something like this:

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

Upvotes: 2

Related Questions