Image and text in button

[JontyMC]

How can I create a (standards compliant) HTML button that has a left-aligned image and text in. I'm trying to recreate the XP toolbar buttons. I may need the button to have background image too. Any ideas?

Jon

"I don't regret this, but I both rue and lament it.

 

[feherke]

Hi

With [tt]button[/tt] tag ?

<button><img src="theimage.gif" alt=""> The Text</button>

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Feherke.

http://rootshell.be/~feherke/

 

[JontyMC]

I would like to be able to do it in an input submit tag:

<input type="submit" value="some text and a pic"/>

Jon

"I don't regret this, but I both rue and lament it.

 

[feherke]

Hi

You can submit with JavaScript, like this :

<button><img src="theimage.gif" alt="" onclick="this.form.submit()"> The Text</button>

This will not work in browser which does not know JavaScript, or have JavaScript disabled. But I have a feeling, that anyway your site will be JavaScript dependent. ( Sorry if not. )

If you combine it with [tt]noscript[/tt], you can avoid the lack of functionality in absence of JavaScript. But I do not think you want this.

<script type="text/javascript">
<!--
document.writeln(
'<button><img src="theimage.gif" alt="" onclick="this.form.submit()"> The Text</button>');
// -->
</script>
<noscript>
<input type="image" src="theimage.gif" alt="The Text">
</noscript>

As far as I know, there is no nicer way to do this. Maybe you can position an [tt]img[/tt] over an [tt]input[/tt] of type submit, then use JavaScript to make them to move together when clicked.

Feherke.

http://rootshell.be/~feherke/