Jump to content

Recommended Posts

I have searched and tried editing the code and just can't seem to figure out how to get image rollovers to work with an "input" or "submit" button.

 

Does anybody know how to get this to work for an "input" button?  I've done this a thousand times for menu buttons that are links.  But never an input?

 

register.png

 


<input name="submit" type="image" src="layout/images/buttons/register.png" alt="register" />

OK, I am getting closer.  I have played around with it and now I've got this kind of working....

 

Problem is, the word "Submit" is displayed over my background.  However, the image rollover works well. 

 

<input type="submit" value="Submit" class="button" />

 

.button {
    border: none;
    width: 123px;
    height: 30px;
    background: url(images/buttons/register.png) no-repeat top left;
}

.button:hover {
background-position: -123px 0;
}

 

 

write value="" instead of value="submit".

<input type="submit" value="" class="button" />

 

 

vineet

 

Aye, thanks.  So simple.  I would usually catch that but I am tired.  Need sleep...Do you happen to know if my solution is cross browser friendly?  It seems to work in IE8 and Firefox just fine.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.