Insert a small image in a HTML form button. 4

[BirdieNamNam]

Hello, dear friends!

Do anyone know an easy way to put a small image in addition to the normal text in a HTML button. That is, I'd like to make a function to work with all my buttons, something like:

<INPUT
  TYPE="button"
  NAME="Close"
  STYLE="padding-left: 30px"
  VALUE="Close"
  onLoad="AddIcon('Smiley.gif')">

And the function (AddIcon) would put the image "Smiley.gif" into the button, like this:

Best regards, Sebastian.

 

[WartookMan]

You could always create/use your above image AS the submit button using:

<input type="image" src="/buttons/smile.gif" width="20" height="20" alt="Submit" border="0">

Alternatively, you can create your own "button" using HTML:

<style type="text/css">
.button {
	background-color: #cccccc;
	border-color: #eeeeee #999999 #999999 #eeeeee;
	border-style: solid;
	border-width: 2px;
	color: #000000;
	font-family: Verdana, Arial;
	display: block;
	width: 0;
	padding:4px;
	font-size: 14px;
	text-decoration: none;
}
img {
	border: 0;
}
.center {
	vertical-align: middle;
}
</style>
<form>
<a class="button" href="javascript:SubmitForm()"><span class="center"><img src="submit.gif" height="20" width="20"></span> Submit</a>
</form>

Hope this helps.

Pete.

PS - Hey... I like this new "CODE" text area - makes copy/pasting a whole lot easier. Hopefully people will remember to wrap their code with code tags.


Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[BirdieNamNam]

Thanks a lot for your excellent answer.

I got another answer as well, that you might like to read, how to place a image over the actual HTML button:

http://www.tek-tips.com/viewthread.cfm?SQID=783252&SPID=216&page=1

Thanks again, Sebastian.

 

[YNOTU]

Glad to see they finally fixed this

problem. Ver y nice TT.

 

[ChrisHunt]

Yet another option...

<button type="submit">
   <img src="smiley.gif"> Close
</button>

Note that the <button> tag was introduced in HTML version 4, so a few really ancient browsers won't understand it. Mind you, they probably wouldn't understand some of the Javascript solutions already offered either.


-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BirdieNamNam]

Thanks, Chris!

I knew the code you were sending me. The fine thing with putting small images on standard buttons is that it makes it easy to change language in the button texts. So, I dont have to create the button text in an image.

Anyway, the "old browser" problem does not exist for me, I'm creating a intranet application for my company, and the browsers are automaticly upgraded.

Thankt for your efforts, Sebastian.

 

[BirdieNamNam]

WOW CHRIS!

i did not really see what you wrote in your code until now. this is terrific! Just what I need! Fantastic! I guess I can use CLASS and onClick events as usual?

/Sebastian.

 

[BirdieNamNam]

I guess Chris, that there is no way to build this icon image into a CSS class. It would be even easier to use. Something like

<STYLE>
.image1
{img: laskjdhfj.gif}
</STYLE>

<BUTTON TYPE="submit" CLASS="image1">
  Close
</BUTTON>

would be nice...

/Sebastian.

 

[ChrisHunt]

To be honest, I've never used this tag myself so I haven't really played around with it. You could experiment with setting padding and background images in CSS - either on the <button> tag itself or on a <span> nested within it. Just be sure to test it thoroughly on your target browser(s)!

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BirdieNamNam]

Thanks again, Sebastian.

 

[WartookMan]

You could try:

...
button.image1 {
	background-image: url(imagename.gif);
	background-repeat: no-repeat;
	background-color: #ffffff;
	height: 50px;
	width: 100px;
}
...
<button type="submit" class="image1">
  Close
</button>

You might need to change the height/width of the button to accommodate the image. Also set the background color, and repeating of the image as appropriate.

Hope this helps.

Pete.


Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[BirdieNamNam]

I really like you guys, and all effort you put down for me!

Pete, it works very fine. And if I don't set the height, width or bg-color at all, it will look just like a standard button with the image as an icon. Exectly what I wanted!

Thanks a lot!

/Sebastian.

 

[BillyRayPreachersSon]

If this is for an intranet, and you have the luxury of using IE only, you could always investigate behaviours...

We use them here to a large extent, and have custom buttons with images, scrollable tables, etc - they're pretty cool.

Not half as easy to write as any of the solutions presented here, of course!

Dan

 

[BirdieNamNam]

Sorry, Dan, I don't understand what to invstigate...? Anyway, I want simple solutions, 'cause noone here is specialized in this kind of programming, so high code readibility is really a key to sucess...!

/Sebastian.

 

[stormbind]

Nice one chris, I didn't know of <button>..</button>

----------
I'm willing to trade custom scripts for... [see profile]

 

[RISTMO]

Behaviors *would* work, but like Dan said, they're IE only. And the scripts above are a lot simpler and more easy to use.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.channelministries.com/

http://www.pillarzone.com/

 

[BirdieNamNam]

OK. I have no idea what behaviours are. But I'll ask that question if I think I'll need it. Thanks for now!

/Sebastian.

 

[stormbind]

I don't understand the purpose of behaviours.

They are included as external files in the same way that javascript, styles and includes (select browsers) can be.

The HTC contains HTML and JScript. What the difference in a HTC and just regular DHTML?

----------
I'm willing to trade custom scripts for... [see profile]

 

[lebisol]

consider a rollover if u like

<a href= "javascript:document.FormName.submit()" onMouseOut="Java_swapImgRestore()" onMouseOver="Java_swapImage('LOGIN','','/images/Login1.jpg',0)" onMouseDown="Java_swapImage('LOGIN','','/images/Login2.jpg',0)"><img name="LOGIN" src="/images/Login.jpg" width="60" height="28"  border="0"></a>

or "old school" with 'type' of image

<input name="Submit" type="image" value="Submit" src="/submit_img.jpg" width="50" height="20">

All the best!

> need more info?
:: don't click HERE ::

 

[lebisol]

oops in the rollover snip above replace "Java_" with "MM_" to edit in DW native JS behaviors....anyway u get the point-just make a regular rollover and then in its link use:

javascript:document.formname.submit();

All the best!

> need more info?
:: don't click HERE ::