Current location: Hot Scripts Forums » General Web Coding » JavaScript » Put a small icon image into a HTML form button.

Put a small icon image into a HTML form button.

Reply
  #1 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2004
Location: Göteborg, Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Question Put a small icon image into a HTML form button.

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 in the image attached.

Best regards, Sebastian.
Attached Images
File Type: gif Buttons.gif (506 Bytes, 15216 views)
Reply With Quote

Featured Marketplace Scripts (view more)

  #2 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2004
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
see attached --

you may want to add an onclick event to the image
and you will probably also need your buttons to be in separate cells

The other drawback is the fact that browsers leave a gap under the button the exact height of the image.

other than that it works
Attached Files
File Type: zip imgbtn.zip (667 Bytes, 1674 views)
Reply With Quote
  #3 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2004
Location: Göteborg, Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Very nice! Thanks!

Guess that your code is automaticly gererated from some software. If you get rid of the table and div tags, you will not have the problem you described. Thanks a lot!

/Sebastian.
Reply With Quote
  #4 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2004
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Hi,

I got rid of the div tags -- just needed to change the relative positioning and sure enough it works perfect.

Thanks for the tip.

Regards,
Jim.
Reply With Quote
  #5 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2004
Location: Göteborg, Sweden
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up

Hello again Jim!

Found a much easier and clean way to do the thing. Not JavaScript but two ways that works fine:

Code:
<BUTTON TYPE="submit">
  <IMG SRC="smiley.gif" ALIGN="absmiddle">
  Close
</BUTTON>
...and...

Code:
<STYLE>
button.image1 {
    background-image: url(smiley.gif);
    background-repeat: no-repeat;
}
</STYLE>

...

<BUTTON TYPE="submit" CLASS="image1">
  Close
</BUTTON>
The first way for one place defined buttons, and the second one for being able to change all icons in the class. The only difference I've seen in appearance is that in the first way the image will "be pressed" when clicking the button. The second image will "standstill".

So easy...

/Sebastian.
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
formmail problem gscraper Perl 12 08-27-04 03:06 AM
Clear HTML form birdie_nam_nam JavaScript 6 02-16-04 12:57 AM
image submit button problems Pepe PHP 10 12-22-03 08:15 PM
how do i re-fill the html form??? gaurav_sting PHP 1 12-21-03 12:13 PM
form to sql to html cadtank New Members & Introductions 3 06-23-03 09:37 PM


All times are GMT -5. The time now is 06:55 PM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.