Page 1 of 4
Need advice on submit buttons for layout with multiple theme
Posted: Mon Jan 29, 2007 11:13 am
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!
Posted: Mon Jan 29, 2007 1:19 pm
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!
Posted: Mon Jan 29, 2007 2:09 pm
by feyd
Why document.getElementById? You're in the element, write it (preferably with the DOM)
Better yet, use the document onload event to trigger substitution so you don't need scripting integrated into it at all.
Posted: Mon Jan 29, 2007 2:46 pm
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.
Posted: Mon Jan 29, 2007 2:48 pm
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.

Posted: Mon Jan 29, 2007 2:53 pm
by matthijs
Posted: Mon Jan 29, 2007 2:58 pm
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.
Posted: Mon Jan 29, 2007 3:04 pm
by RobertGonzalez
Why can't you just give your button a background image?
Posted: Mon Jan 29, 2007 3:05 pm
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.
Posted: Mon Jan 29, 2007 3:17 pm
by Luke
transparency??

Posted: Mon Jan 29, 2007 3:22 pm
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.
Posted: Mon Jan 29, 2007 3:24 pm
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!
Posted: Mon Jan 29, 2007 3:28 pm
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).
Posted: Mon Jan 29, 2007 3:31 pm
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;
}
Posted: Mon Jan 29, 2007 4:01 pm
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?