...

View Full Version : Really cool image submit button that changes values w/out editing image!



l3vi
03-13-2003, 02:58 AM
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/:


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


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

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.


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:


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


<input type="text" class="search2" maxlength="7" size="20">

Thats all...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum