Reputation: 41

How can I fill a submit button with an image?

so I have a submit button with this code:

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

an in the CSS I have:

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this?? (I rather not use javascript if possible)

EDIT: Currently working. I just delete history, cash and it works... ty

Upvotes: 4

Answers (7)

Jerska

Reputation: 12042

I see multiple options here :

Change saving

Save your image to 20x20, and whoops, problem gone.

Use CSS3

CSS3 introduces a new feature that is backgroud-size

Just put that in your CSS :

background-size: 20px 20px;

But it won't be compatible with old browsers.

Use JavaScript [Bad style]

HTML

<form method="POST" action="test.php" name="myform">
    <a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>

Upvotes: 0

Jukka K. Korpela

Reputation: 201818

Use an image submit button instead, and shrink the element to the desired dimensions using CSS.

<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />

Upvotes: 3

Shadow Wizzard

Reputation: 66388

You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.

Example:

<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />

Live test case.

Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".

Upvotes: 1

WhyMe

Reputation: 535

Add an id to the button, Updating the image:

document.body.onclick=function(e){
    debugger;
    var bid=document.getElementById('bid');
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}

js fiddle here.

Upvotes: 1

yeyene

Reputation: 7380

You need to wrap a span to submit button and style it.

DEMO http://jsfiddle.net/H5dmd/2/

HTML

<form method="post">
    <span class="icon">
        <input name="submit" type="submit" value=" "/>
    </span>
</form>

CSS

input[type=submit]{
    background:transparent;
    width:20px;
    height:20px;
    border:none;
    padding:none;
    cursor:pointer;
}
.icon{
    float:left;
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;        
}

Upvotes: 1