Need advice on submit buttons for layout with multiple theme

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Need advice on submit buttons for layout with multiple theme

Post by Luke »

I am building a site right now that has multiple themes. All I have to do to change the theme is change the css file. The only part that I am having a hard time changing is the images I'm using for submit buttons. There are probably about 10-15 buttons that change color when you hover over them using javascript. I'm using

Code: Select all

<a class="rollover"><input type="image" src="images/buttons/continue.gif" width="120" height="28" alt="Continue" /></a>
To have images as submit buttons. Is there a more css-friendly way of making my submit buttons images so that these images will change when I change my css file (theme)? Thanks guys!
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Alright, here's the only solution I've come up with as of right now, but I didn't get much sleep last night, so does anybody see anything wrong with this approach? (from a usability stand-point)

Code: Select all

<div id="submit_button">
                 <script type="text/javascript">
		  document.getElementById('submit_button').innerHTML = '<a href="javascript://" onclick="document.create_form.submit()" class="button save"><span>Save</span></a>';
                 </script>
                 <noscript><input type="submit" value="Save"></noscript>
</div>

Code: Select all

form .save
{
	width: 60px;
	height: 20px;
	background: url(../images/buttons/save.gif) no-repeat 0px 0px;
	display: block;
}
form .button:hover
{
	background-position: 0px -20px;
}
.button span
{
	display: none;
}
Thanks guys!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Why document.getElementById? You're in the element, write it (preferably with the DOM) :P

Better yet, use the document onload event to trigger substitution so you don't need scripting integrated into it at all.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

what about the <input type="image" src="" /> element? it's an image that acts as a submit button, and built in to the x/html form spec.

It's css style-able, and no javascript tomfoolery needed.
Last edited by Kieran Huggins on Mon Jan 29, 2007 2:48 pm, edited 1 time in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Kieran Huggins wrote:what about the <input type="image" src="" /> element? it's an image that acts as a submit button, and built in to the x/html form spec.
Which is what I'm currently using, but it lacks the ability to be changed via css. :(
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

While I agree with that article, I work at a marketing firm, and unfortunately the way things look come first here. Also, I am not trying to style a form control. I'm trying to style an anchor tag.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Why can't you just give your button a background image?
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

You can style an input tag as well, though. Use the same method that you posted earlier (the CSS background), sans the javascript, and set transparency on the object to 100% transparent and you have a submit button that is still clickable, but styled to whatever you like.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

transparency?? :?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ninja, one thing I don't understand is, why have both an anchor tag and a button/input element? isn't it one or the other? Something is either a link to something else or it is a form element. In your case it seems like you're building a form, so you should use a valid form element, button or input.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

matthijs wrote:Ninja, one thing I don't understand is, why have both an anchor tag and a button/input element? isn't it one or the other? Something is either a link to something else or it is a form element. In your case it seems like you're building a form, so you should use a valid form element, button or input.
I think you are all misunderstanding me. I'm fine with using an input element... SHOW me how I could do that... the whole reason behind me posting the question here was to get an answer on HOW to do it... silly geese!
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Code: Select all

#transparentblock {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}
Takes care of all browsers. Ranges from 0-1 (0-100 for filter), 0 being normal, 1(100) being invisible (but still the box is still rendered so as not to screw up positioning).

That way you can set transparency of the input button itself, but it still remains clickable as long as your background image for the button is visible (the background still displays, the button itself does not).
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

jQuery to the rescue?

Code: Select all

$(function(){
	$('form input:image').wrap('<a class="submit"></a>').hide().parent().click(function(){
		$(this).parents('form').submit();
	});
});

Code: Select all

  <form method="post" action="?">
	<input type="image" src="/default/image.jpg" />
  </form>

Code: Select all

form a.submit {
	background: red url(fancy/image.jpg);
	display: block;
	width: 100px;
	height: 20px;
}
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

The Ninja Space Goat wrote:While I agree with that article, I work at a marketing firm, and unfortunately the way things look come first here. Also, I am not trying to style a form control. I'm trying to style an anchor tag.
Ok, help me understand this. If you are styling an anchor tag, why are you using a form control inside of it? or better yet, what effect are you after?
Post Reply