473,898 Members | 2,637 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

button element with image in it

Can the

<button><img> </button>

mutated via CSS so, that the inner image of <BUTTON>
would entirely visually become the button itsself - I mean without the
outer elements borders and so...

I tried removing paddings and borders and margins but this wouldnt seem
to help. in MSIE, Mozilla and Opera - there still some pieces of the
button are left to be seen and te inner image wouldnt cover the whole
area. Using the <img> as an background image for buttons isnt an option
because it would crate a CSS bloat declarations.
Jul 20 '05 #1
6 6902
Marek Mänd wrote:
I tried removing paddings and borders and margins but this wouldnt seem
to help. in MSIE, Mozilla and Opera - there still some pieces of the
button are left to be seen


http://www.w3.org/TR/CSS21/conform.html#conformance

| CSS2.1 does not define which properties apply to form controls [...] or
| how CSS can be used to style them. User agents may apply CSS properties
| to these elements. Authors are recommended to treat such support as
| experimental.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Jul 20 '05 #2
Marek Mänd <ca********@mai l.ee> wrote:
Can the

<button><img> </button>

[be] mutated via CSS
Absolutely maybe. But the first point to note is that the <button>
element is essentially unreliable in authoring for the WWW, due to lack
of correct support in browsers.

Use a submit button instead. Or, if you insist, an image submit button,
see http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Test that the form works. _Then_ start considering styling.
so, that the inner image of <BUTTON>
would entirely visually become the button itsself
Then there's hardly any point in using <button>, instead of
<input type="image">.
Using the <img> as an background image for buttons isnt
an option because it would crate a CSS bloat declarations.


That statement does not quite parse. But setting a background image for a
normal submit button, <input type="submit">, is of course one possibility
in styling. It may confuse the user, since it won't really _look like_ a
submit button then, but this problem is shared by any attempt to use an
image for a button.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #3
Jukka K. Korpela wrote:
Marek Mänd <ca********@mai l.ee> wrote:
Can the
<button><img> </button>
[be] mutated via CSS

Use a submit button instead. Or, if you insist, an image submit button,
see http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Test that the form works. _Then_ start considering styling.
so, that the inner image of <BUTTON>
would entirely visually become the button itsself

Then there's hardly any point in using <button>, instead of
<input type="image">.


Well IMHO there could be some advantages:
Consider situation:
a saved pure html page without images and without stylesheets

<button type="button">< img src="unexistant "><span
style="display: none">commandbu tton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailabl e">
with a tooltip. Besides tooltips everywhere in the document can be quite
frustrating. Especially amuses me all these CSS websites, that use
acronym and abbr elements quite often - one cannot even move the mouse
without annoying tooltips.... I am against flashy title tooltips, there
is a status bar for that.

Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">. .. Yes it can be WAd via JS, but thats
overhead.

Using hyperlinks for simulating buttons that do something on a web page
using JS - I find this approach not right because of I think of URLs as
of a way to navigate to a different page. Ofcourse when smb wants
Netscape3 compatibility then this is the way ;D
Using the <img> as an background image for buttons isnt
an option because it would crate a CSS bloat declarations.

That statement does not quite parse. But setting a background image for a
normal submit button, <input type="submit">, is of course one possibility
in styling.


Well those images for buttons would actually be different in web
application, thus for earch image a style class is too much. As icons
are much easily to be changed in serverside scripting templates than in
CSS (which just adds too much complexiti and dependancies)
Jul 20 '05 #4
Marek Mänd <ca********@mai l.ee>:

a saved pure html page without images and without stylesheets

<button type="button">< img src="unexistant "><span
style="display: none">commandbu tton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailabl e">
Oh please, don't act as if you had never heard of the 'alt' attribute (of
'img' and 'input' as well), nor understood it.
Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">. ..


I haven't checked, but hasn't 'button' to be a descendant of a 'form', too?

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain
Jul 20 '05 #5
Marek Mänd <ca********@mai l.ee> wrote:
Then there's hardly any point in using <button>, instead of <input
type="image">.
Well IMHO there could be some advantages:


You should consider the sure disadvantages first.
Consider situation:
a saved pure html page without images and without stylesheets
Is this about authoring for the WWW, which is the topic in
comp.infosystem s.www.authoring groups? Well, maybe, as long as you
consider how to make pages that work on the WWW without images and style
sheets too. (How about working without JavaScript?)
<button type="button">< img src="unexistant "><span
style="display: none">commandbu tton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailabl e">
with a tooltip.
No reason to mess around with tooltips.

They both perform worse than <input type="submit">.

And <input type="image"> works on most browsers if you specify adequately
the attributes that might be used as textual replacements for the image
(alt, name, value).
Besides tooltips everywhere in the document can be
quite frustrating.
I did not mention any tooltips. Where did _you_ get the idea of putting
them everywhere?
I am against flashy title
tooltips, there is a status bar for that.
No it isn't. The status bar is for the browser to show the status.
Disturbing that classifies a page as nerdishly childish.
Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">. ..
You didn't mention what kind of a button you have. On the WWW, it is best
to try and make all buttons submit buttons so that you can have a server-
side backup, even if you normally use client-side scripting for the
actions invoked by the buttons. If that's not feasible, make them look as
much like normal default-style buttons as possible. And that's quite
possible: you simply use <input type="button">, naturally in code that
has been generated by client-side JavaScript code and with an explanation
in a <noscript> element, to avoid frustrating users that are using
JavaScript-disabled browsers. The key point is to do nothing in order to
change the appearance, to maximize the odds that people understand
buttons as buttons and not as fancy decoration or something.
Yes it can be WAd via JS, but thats
overhead.
Yr abbrs r probly bout something off-topic.
Well those images for buttons would actually be different in web
application, thus for earch image a style class is too much. As icons
are much easily to be changed in serverside scripting templates than
in CSS (which just adds too much complexiti and dependancies)


Sorry, that does not parse either. If you had originally posted a URL
that demonstrates the context and problem, maybe some specific advice
could have been given.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #6
Christoph Paeper <ch************ **@nurfuerspam. de> wrote:
I haven't checked, but hasn't 'button' to be a descendant of a
'form', too?


No. All form fields may syntactically appear outside <form> elements too.
Mostly it does not make sense, but there are special cases like
<input type="button"> or <button type="button"> without server-side
backup. However some old browsers fail to render form fields outside
<form> elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
6573
by: Noah Spitzer-Williams | last post by:
Hello guys, I'm itinerating through my array using pointers in this fashion: image is unsigned char image do { cout << "image byte is: " << *image << endl;
5
35776
by: JohnSouth | last post by:
Hi I've an image submit button on a form that needs to appear flat on the surface. I can't get rid of the shadow that appears bottom and right. This is the best I can do. <code> ..SearchButton { width=100;
2
3517
by: Matt | last post by:
In the following code, I have 2 questions regarding submit button with image. 1) Does this code <input type="image" name="populate" src="populate.gif"> behave the same as an HTML submit button with image populate.gif? When I click p1 or p2 button, it will post the page to process.asp. 2) When I check the checkbox, I want the image in submit button change from populate.gif to validate.gif. Unfortunately, the code InputForm.p2.src =...
8
1361
by: dev | last post by:
hey all, i have this demo code: <script> tog=0; function setvalue(id){ if(id){ tog=1 }else{ tog=0;
14
2175
by: frizzle | last post by:
Hi there, I have a form on a contact page, and to make the layout cross-browser/-platform i want to use an image as a button instead of using an image as background on a button.... Problem: When i insert a (e.g.) reset-button, and change the source type="button" to type="image", instead of resetting the form, it submits the form....
6
16120
by: bonAveo.net | last post by:
Hi, I got 3 buttons with 3 different values... > <input type="image" src="search.png" value="http://jigsaw.w3.org/css-validator/validator?usermedium=all&uri=" onclick="addUrl(this.value)"> > <input type="image" src="search.png" value="http://validator.w3.org/check?uri=" onclick="addUrl(this.value)"> > <input type="image" src="search.png"...
7
1459
by: John Smith | last post by:
As it is now apparently illegal in the UK to produce a website which is inaccessible to the disabled, which includes the JavaScript-disabled and images-disabled, am I right in thinking that the only ASP.NET postback capable control which is now of any use is the Button control? The LinkButton is clearly no good as it uses JavaScript and the ImageButton doesn't work in Mozilla with scripting and images turned off. Am I missing something or...
1
1061
by: russiandevil | last post by:
hi, Does anyone have an idea on how I'd go about highlighting (with a border, or something equally effective) a input button of type 'image' (i.e. <input type=image alt=Login src=http://<etc, path to image file> Login) For most of the other element, applying a style such as "background-color: red; border-color: red; border-width: thick" seems to be sufficient, however for image buttons (especially those that have
3
5576
by: crazychrisy54 | last post by:
Hi there I just wondered if there is any way using GD to insert a clickable button or some clickable text into a image? It is possible to create images for buttons but what if you want a clickable button *inside* another image. I don't know if this is along the right lines but the following code puts a image inside another image. Perhaps I could then make im2 clickable or is it just not possible? Any help would be very much
0
9993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9841
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10858
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10484
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9662
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7188
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5882
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4296
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3307
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.