Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Jan 2003
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Really cool image submit button that changes values w/out editing image!

    Okay, I think this is pretty cool. Im sure u all know how to make your own custom submit button, but, you have to enter the value by editing the image. This is what most are familiar w/:
    Code:
    <input type=image src="blahblah.gif">
    but I found a new way, where you can change the value in a few clicks of a button! Here is the code for it(all red r what u edit):
    Code:
    <style type="text/css">
    .search{
    background-image:url('smt.jpg');
    background-repeat:no-repeat;
    width:75;
    height:26;
    border:medium none;
    text-transform:uppercase;
    font-size:8px;
    font-family:Small Fonts;
    text-indent:0px;
    }
    </style>
    <input type="Submit" value="Search!" class="search">
    May look like more than u expected..but its not really. I will walk u throught it.
    1.That is the class name, make a new class for each submit because you must change indents depending on what is typed.
    2.That is just the URL of the image
    3.That is what the width of the image is(What it was saved as)
    4.That is the height of the image(What it was saved as)
    5.That is the indentation to position the text on the image.
    6.That is the value that will show up.
    7.That is the same as #1.
    Just copy and paste that class for each submit button, then go throught the 7 step process! I hope that hlps!!
    Edit:
    oh yeah!! BTW, after you have most of it set, like the image, its really only a matter of copying, pasting, and doing step 1, 6,7,and5.

    Edit:
    ALSO, I FORGOT ANOTHER THING!!! U can also use it for stuff like a text input thinga mabobber. For the image that I used 4 my button, here is the css code:
    Code:
    .search2{
    background-image:url('smt.jpg');
    background-repeat:no-repeat;
    width:75;
    height:26;
    border:medium none;
    text-transform:uppercase;
    font-size:8px;
    font-family:Small Fonts;
    text-indent:20px;
    padding-top:9px;
    }
    And here is the HTML Code 4 it:
    Code:
    <input type="text" class="search2" maxlength="7" size="20">
    Thats all...
    Last edited by l3vi; 03-14-2003 at 12:23 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •