Want Form Button and Image

HTML & CSS
1

Is this possible…

I want a Form Command Button that has an Image as its face.

So when you click on it, it is something that my PHP would recognize as a Submitted Form.

But when you look at it, you might see something like a Flag or Star icon.

What I am trying to do is make it so if someone clicks on a Flag or Star icon, my Private Message form is resubmitted and I can “flag” the PM, all without having to use JavaScript. (Yuck!!)

Of course I could have a Form Button that says “Flag PM”, but I think it would look prettier - and be more noticeable - with something like this…

Again, no JavaScript please. Oh, and HTML4 is preferred.

Sincerely,

Debbie

2

HI Debbie,

You can apply a background image to the input type = submit button quite easily.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#submit {
	width:100px;/* the width of your image*/
	height:100px;	/* the height of your image */
	padding:0;/* clear defaults */
	margin:0;/* clear defaults */
	border:none;/* clear defaults */
	background:url(images/btntop.jpg) no-repeat 0 0;/* your image */
	text-transform:capitalize;/* makes text-indent work in ie6*/
	text-indent:-999em;/* hide the text value*/
	overflow:hidden;/* stop outline from extending around hidden text that is off screen and to fix a bug in old IE */
	display:block;/* ie6 needs this to be display:block or it won't show image*/
	cursor:pointer;
}
#submit:hover{background-position:0 100%}/* use if you have made a sprite for hover effect*/
</style>
</head>

<body>
<form name="form1" method="post" action="">
		<div>
				<input type="submit" name="submit" id="submit" value="Submit">
		</div>
</form>
</body>
</html>

That should work all the way back to IE6 (but without hover effect in ie6).

There may be an issue that the user may not know what the star is for and that it is supposed to be clicked unless you can make it obvious some how.

3

What is that supposed to do??

When I pasted it into a blank file and ran it, I just got a white page… :-/

So then what would you recommend…

If my OP was worded to say that I wanted an Actionable Flag, I think people would know what to do in the right context (e.g. Viewing a PM, Viewing a Profile, etc.).

In a lot of e-mail programs, there is a column next to each Message where when you click it goes from a Gray Star to a Gold Star.

I already have that capability in places like my Inbox, but figured it would be nice to allow Users to “flag” a Private Message while they are reading it…

As mentioned, I could easily add a Form Button labeled “Flag PM”, but I already have “Reply”, “Forward” and “Delete” buttons, and I thought maybe breaking things up a bit would help.

Here is a screenshot to help you visualize what I mean… (Minus the star!!)

Sincerely,

Debbie

4

Sorry you lost me there on step 1:)

What is what supposed to do?

You asked for a form button that you could submit that was an image so I suggested using a form submit button with a background image. This would give you your star image (which you would have to draw but from your screenshot you already have a star drawn) and then it would submit the form when clicked as per normal.

When I pasted it into a blank file and ran it, I just got a white page… :-/

Of course you did!!

You need to replace the image path with the path to your own image and size the button accordingly. I clearly marked every css property used with css comments as I expected you to question it. :slight_smile:

So then what would you recommend…

Maybe just add a title to the button so that a tooltip gives a hint (much like the flag and report buttons on this forum). But then again I’m the worst one to ask for design advice :slight_smile: I just code.


<input title="flag private message" type="submit" name="submit" id="submit" value="Flag message">

I assume you have somewhere in your site where you explain what all the icons are for but its usually better not to have to make your visitors think too hard.

5

Yes, when I was reading your code I noticed that the path was to your local machine.

(In the past you have been nice enough to link to the web so it works for anyone as-is.)

Got it!

Ha ha.

Well, that is what I was thinking (i.e. Title should be enough of a clue)

Sorry, documentation costs you extra!! (Plus, I think that is in v3.0) :lol:

Off to eat some pancakes!! Will pick this up later. :cool:

Sincerely,

Debbie

6

Paul,

I have a file called “test16.php” which is in my “public_html” folder which is my Web Root.

In “public_html” is a folder called “images”, and in that is a file called “Yellow Star.jpg”

I changed your code to this…


	background:url(/images/Yellow Star.jpg) no-repeat 0 0;/* your image */

Unfortunately, when I run things, all I see is a light gray box.

When I click on it nothing happens.

Sincerely,

Debbie

7

Just to confirm, “public_html” is the same as “/”, your web site’s root directory,
and at the root directory, you have a folder called “images”,
and inside “images” is a file called “Yellow Star.jpg”.

Assuming all of the above was understood correctly, the path to “Yellow Star.jpg” should look like this:

“/images/Yellow Star.jpg”


background:url("/images/Yellow Star.jpg") no-repeat 0 0;    /* your image */

I would like to assume that the space in the image name is a typo, because there should be NO spaces in the entire path or filenames. If there is, the entire path MUST be surrounded by quote marks or the image will not be found.

ideally, you should have quote marks and no spaces.


background:url("/images/YellowStar.jpg") no-repeat 0 0;    /* your image */
8

Right.

Right.

No type-o. I just grabbed an image off the Internet for a quick test.

Yes, adding the double-quotes made a difference!! (I never knew that… Thanks!!)

Is having spaces in a File Name that big of a deal?

I just had a lengthy debate with a bunch of Mac people about whether using Spaces or Special Characters was an issue when it came to Directory Names and File Names.

The resounding answer was “No!” (Of course that was in the context of OS-X and Macs…)

Back to my OP…

So after I made your fix, I reloaded the page and saw something weird?!

Below are Before Hover and On Hover screenshots…

It turns out the random Yellow Star I downloaded from online was 225px by 225px, so I resized it.

Here are new Before Hover and On Hover screenshots with a file that is 100px by 100px…

Not only was I hoping to take an Image (e.g. Yellow Star) and turn it into a Form Button, but I was hoping to make it look “dynamic” so that when a person clicks on the Image, it appears to be moving…

The first example with the over-sized Yellow Star appeared to do that, although it looked strange because you were in essence looking at a 225 x 225 image - which appears to be moving - though a 100 x 100 porthole!!

Sadly, the second example is “dead as a duck” when you hover over it!! :frowning:

Is there a way to get the ultimate effect I am searching for without JavaScript and without needing Photoshop?? :-/

Sincerely,

Debbie

9

The choices are:

  1. Always eliminate spaces from a filename.
  2. Always use quotes around a path that includes a filename with spaces.
    Make a habit of doing both and you’re unlikely to ever make a path error in your code.
    You’re a big girl. Take your pick. :slight_smile:

Moving, how?

Pending the description of “how”.

10

Correct, the submit-area is 100*100px, and the background-img too: bg-img is filling the box completely.

If you make the background-position: 0 100%, then the bg-img will go to the bottom of the box; but it is there already! Nothing to move, no dynamics.

#submit {
   ...
   width: 102px; /* the width of your image + 2px */
   height: 102px; /* the height of your image + 2px */
}
#submit:hover,
#submit:focus:
   background-position: 100% 100%; /* star will move 2px to the right and 2px down at hover */
}

In case the background color of the page is not the white around the star, then you’ll have to set the background-color of the #submit into white; otherwise it’s not so subtle.

=======
URL-encoding

I just had a lengthy debate with a bunch of Mac people about whether using Spaces or Special Characters was an issue when it came to Directory Names and File Names.
The resounding answer was “No!” (Of course that was in the context of OS-X and Macs…)

Yes, for local use of directory names and file names.
But if you are using links in a webpage (or the src=“…” of an image), it is completely different.
Then the names have to be “URL-encoded”, which means that some special characters are not allowed in their html-code. A space has to be coded as %20, an ampersand & has to be coded as & etc.
The quote-marks for the url(“…”) do the same for a background image, but better is not to use spaces in directory names and file names on the server, then you don’t have to write unreadable codes in links.

  • For splitting up words in a directory name or file name you can use a hyphen -, which is unbreakable.

So "Yellow Star.jpg"can be better “Yellow-Star.jpg”
And even better everything always without capitals: “yellow-star.jpg”, then it’s more likely that no typo’s are made.

edit
Seems I only make crossposts today. :wink:

11

Ok here you go :slight_smile:

This is the image I used and it has 3 states for normal, hover and active.

If the image is too big for you just make your own and adjust the background -positions in the code to match the dimensions of your own image.

12

Thanks for the code and the example, Paul.

Unfortunately, I have no way to make a sprite, so I don’t believe your sample will do me any good.

(Maybe I should have said so up front, but the “yellow star” posted above was just some random image I grabbed quickly as an example. I will likely want to use something different for my actual implementation…)

Sadly this is all a reminder of how nice it would be if I had a graphic design program and had the time to learn how to properly use it, but alas that isn’t practical right now.

So, is there a way to get a similar end effect to what you so nicely showed me, but with less resources?

I guess I thought you could make take a bland image like this…

…and do something with positioning and a drop shadow to make it appear to “toggle” when you click on it.

BTW, this new image is again just a “test” for now.

(To be honest, in addition to my question in this thread, I am still trying to figure out “If”, “How”, and “Where” to use this “flag” thingy for my Private Messages…) :blush:

Sorry if I am being a pain, but on this particular topic, I am “prototyping” which means building (and breaking) things several times until I get a better image of what I want and need… :frowning:

Sincerely,

Debbie

13

Francky,

Thanks for your answer as well.

I just skimmed it for now.

Looks like a really helpful resource down the road when I know how to make my own Images and Sprites.

Unfortunately, I have the same problems with your suggestions as I mentioned about Paul’s advice.

I think you and Paul are just too far ahead of me right now! :blush:

Sincerely,

Debbie

14

With 1 image it can be done as well, though there are less possibilities than with a sprite:

[CENTER]
[U]red-star100x100.png[/U][/CENTER]
Gratefully using Paul’s example-code :slight_smile: :

When hovering, the image is just shifting a bit right/down with the background-position, as I mentioned in post #10.
When clicked (mouse down) a bit more.

15

Ok here are some more options.:slight_smile: (without using images)

The first one is the simplest of all but unreliable because it uses a non-safe html entity that won’t work in all browsers (fails in IE9 in my tests but works everywhere else) but does depend on the character encoding so I only present it here for example.

http://www.pmob.co.uk/temp/star-submit2.htm

It just the start entity in the value attribute and then styled normally with css.


<input title="Flag Message" type="submit" name="submit" id="submit" value="&#9733;">

It’s a shame that its unreliable as it is the simplest method.

This one uses mitred borders to create a six point star and will work back to ie6 (without the hover effect). It just manipulates the borders into a star and the technique has been around for years.

http://www.pmob.co.uk/temp/star-submit3.htm

The shadow is created with an extra element and uses pseudo content so ie7 and under just get the basic red star.

For further effects you could of course use a single image like Franky’s demo show and overlay the borders for a shadow effect.

16

Paul,

Thanks for some more options!

Here are some Questions/Comments…

1.) Is it correct that a Sprite works by taking one larger image containing several icons on it, and simply using CSS to position which Icon you see?

If so, how well supported is this?

2.) Is it correct that I could always use an Image as the Background on a Form Button - intent of OP - and have the best of both worlds?

Would this even apply to Sprites?

3.) I skimmed your code for the 6-Point Star, but didn’t see any obvious way your code created the actual Star itself?! :-/

4.) What are your thoughts about the Shapes created at this link?

http://css-tricks.com/examples/ShapesOfCSS/

How well supported is that approach?

5.) Is using Images (or a Sprite) to accomplish the visual effect I want bad? (Some people show disdain for images…)

6.) Please empty out your own PM Box!! :wink:

Sincerely,

Debbie

17

Yes that’s basically it. You just have to be careful that the other images in the sprite don’t show in the element you are applying the image to which usually means the element you apply it to has a width and a height to match the icon you are using.

If so, how well supported is this?

It’s just a background image and as such has been supported more or less since year dot.

2.) Is it correct that I could always use an Image as the Background on a Form Button - intent of OP - and have the best of both worlds?

You can apply a background image to a form button and still keep the text in the value attribute visible (removing the text is more of an issue than showing it).

Would this even apply to Sprites?

Sprites are just background images so you can do the same as you can with any normal background image.

3.) I skimmed your code for the 6-Point Star, but didn’t see any obvious way your code created the actual Star itself?! :-/

It’s created with 2 mitred borders overlaid on each other. The first border is on the span and the second border is on the input itself and together they create the star.

4.) What are your thoughts about the Shapes created at this link?

http://css-tricks.com/examples/ShapesOfCSS/

Some of those are basically the same technique with mitred borders that I used except that mine works back to ie6 and the ones above don’t.

How well supported is that approach?

The approach I used is supported back to IE6. The ones in the css tricks demo vary and some will work in IE8+ and the ones that use trasforms will only work in the latest browsers ie10+

5.) Is using Images (or a Sprite) to accomplish the visual effect I want bad? (Some people show disdain for images…)

If you have a button and there is no text content then screen readers won’t know what it does. Therefore for critical actions you should always have a text replacement technique in place.

6.) Please empty out your own PM Box!! :wink:

I removed a few - I can’t be bothered to read through thousands of them to see whether I need to keep them or not :slight_smile:

18

Sorry for all of the questions, but this stuff is all new to me, and a lot for my brain to process?! :blush:

To be clear…

Let’s say I create a “Star Sprite” and decide to re-tool my Inbox to use the Star versus my Red Flag.

Right now the column my Red Flag is in is maybe 10 pixels wide.

So if I created a rectangular Sprite like this…


[---- THIS IS WHERE MY DIFFERENT STARS WOULD GO ----]

…then I could still use it in my 10 pixel wide column, right?

(In other words, the Sprite can be very wide, but as long as an individual Icon on the Sprite matches the width of the available space you have, then you are okay, right?)

So does that torpedo my use of a Sprite?

I mean the whole point is that I want a clickable, actionable Star Icon which by design would NOT have Text inside of it?!

(If I wanted Text, then I’d just create a Form Button that said “Mark as Important” and be done with it?!)

Oh, I see this is a deeper topic than I first thought! :blush:

I guess you would lean towards that approach versus the Sprite, right?

From a visual standpoint, this seems to be the key difference…

If I used a Sprite, I could create the first Star with a Light Gray Outline, and then a second Star with a Darker Gray Outline, and then a third Star which is Yellow.

If I used the “Miter Approach” - not sure what you call it?! - then I could create the first Star as Solid Light Gray, the second as Solid Darker Gray, and the third as Yellow.

Sound right?

Cool!

Is that like a Gilder-Levin thingy?? :-/

And does that mean that Sprites are poor choices for Accessibility, or is the technique you are referring to a sufficient workaround?

I thought we agreed you would delete everyone else’s PM’s so there was room for my “love letters”?? :smiley:

Sincerely,

Debbie

19
Off Topic:

@DoubleDee: You should develop a remote control to star your messages in Paul’s PM-box as important. :stuck_out_tongue:

=======
The mitred borders way
Also known as “[U]border slants[/U]” (2003!).

No, not 100%. Looks fine in IE6 (and IE5.5!), but the star is not showing in IE7 (it’s not my WinXP/IE7 playing false, Netrenderer does the same):

After some some experimenting I think IE7 cannot handle an empty input {width:0; height:0} element with removed content {text-indent:-999em;} which only has some borders. I couldn’t find a workaround; guess it’s possible with a <button type=“submit”>.

Just a moment …

  • Mmm, that was more than a moment. :wink:
<form name="form1" method="post" action=".....">
	<div class="star" title="Mark Message">
		<button type="submit" name="submit" id="submit"><span>Mark Message</span></button>
	</div>
</form>

Notes:

  • Tested in IE7, and according to Netrenderer it should be IE7 and upwards. *)
  • In IE7 the mouse down doesn’t change the coloring, should be better in later IE’s.
  • Color change for the hover is intentionally not applied, for after a click the mouse is on the same place > not showing the new marked state, but the hover again.
    Could be solved with … how must I say it … javascript. - Maybe a clever css3-transition can do it too; didn’t investigate (but then probably problems with not css3-supporting browsers).
  • Attention: the same hovering problem will play if an image/sprite is used!
  • Here no image or sprite is used, just a transparent.gif to get IE7 working (there must be another way too, probably Paul knows).
  • The button text is removed with a <span> inside with absolute position.
  • The 2 overlapping triangles which form the star are set with :before and :after properties, not on the button, but on the containing <div>, then it can’t hurt.
  • Normally the :before and :after are a no-go for IE7, but I found a css-hack for IE7 [U]over here in stackoverflow[/U] (post 38).
  • To see the “marked” state, I made a 2nd page (both pages have the same css).
  • In reality the submitting will go to a php-driven database I think.
  • The database has to toggle the title/tooltip “Mark Message”/“Unmark Message” and the span-content. Further the php-machinery has to inject or remove a class=“marked”, then the css will take care of the rest.
    In the marked state the html is:

    html <form name="form1" method="post" action="....."> <div class="star marked" title="Unmark Message"> <button type="submit" name="submit" id="submit"><span>Unmark Message</span></button> </div> </form>

=======
The image way
Exactly the same can be accomplished with a sprite-image, this one:

[CENTER]
[U]sprite-grey-yellow-star.png[/U][/CENTER]

Notes:

  • Same principles as the other one.
  • Again hover-colors should disturb the user friendliness after a click (see above). The hover-shift (and the mouse-pointer + tooltip) will be enough to see you touched the icon. Tab-key users can see the outline-dots.
  • The right side of the sprite has a transparent part, so a separate transparent.gif is not needed anymore.
  • Advantage: some less (& less complicated) css is needed: no more :before and :after things (and no hack for IE).
  • Advantage: the rounded corners in the image are also available for IE8 and before (lte IE8 don’t support the border-radius property, used in the other way).
  • And all freedom to style the star: with shadowing or an outlined star; a smaller icon can stay beautiful (anti-aliased), etc.

In other words, the Sprite can be very wide, but as long as an individual Icon on the Sprite matches the width of the available space you have, then you are okay, right?

Right! The individual [U]portholes[/U] (containers) of a background-sprite are cutting of the rest, kind of an automatic {overflow:hidden}. :slight_smile:
Questions? :wink:

*) Tested in IE6 also: in case of needed support for IE6 a Conditional Comment can be added with a bit adapted positions for the triangles; the rest is functioning. :slight_smile:

20

Ah yes I forgot about that bug but there was also a typo in my code that may have confused you.:slight_smile:

Here it is working in IE6 and 7. Of course neither show the :active focus state and IE6 won’t show the hover effect and both will get the horrible IE outline when clicked but they are both functional.

You can easily add :after and :before support for IE6 and 7 with a simple expression. Here’s an updated example but I think that’s a step too far for ancient browsers these days.

You have to be careful with using the button element to submit as old IE has a number of [URL=“http://www.dev-archive.net/articles/forms/multiple-submit-buttons.html”]problems with it that may catch you out in some circumstances The input type = submit does not have such problems and the reason I have always avoided buttons as submits.

The benefit of the border approach is that if images or css are turned off you get a functional button unlike your example here which goes blank when images are turned off (btw there’s no images showing at all in IE6). Of course you can get over this with [URL=“http://www.pmob.co.uk/temp/form-submit-image.htm”]various techniques so it all depends how much code you want to throw at it.:slight_smile:

The simplest method is the sprite method as there is no extra mark up needed but if images are turned off you get nothing. It all depends on how important this action is as to which method you employ. For non critical functions I would go with the simple sprite method as the chances of the user having images disabled is low anyway.