Text over button

[zoobie]

I'm using both codes below for buttons but have run out of ideas for putting text over them for lables. Any ideas? Thanks

<button style="font:bold italic 12 tahoma;color:white;width:91;height:28;border:none;cursor:hand;background-image:url(redblue.gif);"><img src="redblue.gif"></button>
<br>
<br>
<img src="redblue.gif" onMouseDown='this.src="redblue_d.gif"' onMouseUp='this.src="redblue.gif"' style="width:91;height:28;border:none;cursor:hand;">

[cg9com]

im unsure as to exactly what you mean...
whats the problem when you do that? you just want text over those pictures? i think in the <button> tag the value of text goes in between the <button>text</button> tag.

[zoobie]

I'm trying to use the same image for several buttons with different text on top of them for quick loading. Problem is, when I use your method of <button><img src=but.gif>text</button> or vice versa, the text goes outside of the image. I've run out of ideas I'm afraid. I'd prefer to use the top code as the whole button goes up and down...but read where this isn't widely supported. I'll take anything at this point. Thanks

[cg9com]

read this:

http://codingforums.com/showthread.p...seover+buttons

does that help any? or do you want it all inline?
you can just use what i posted there, and then add text in bitween the <button></button> tag.


EX:
<button class=button
onmouseover="this.className='buttonOverClass';"
onmouseout="this.className='button';">text</button>

[zoobie]

Ahh...That className adding style to the js is sweet. I've just used the <input type="button" value="Button" because I've read where <button> is not totally supported yet. The only thing I've noticed is when adding cursor:hand; to the js style, onmousedown shows the pointer. Thanks again

[cg9com]

yep no problem, i dont and wouldnt use the <button> tag.

good luck

The only thing I've noticed is when adding cursor:hand; to the js style, onmousedown shows the pointer.

you can just customize each class, no problem.

[tempest1]

Ok i found your problem

try using these attributs

onclick="this.src='image2.jpg'";
onmouseout="this.src='image1.jpg'";

it doesnt get the full feel of a button, because i cant think of the attribut that works when the mouses click is released. If you do know this, you can just use that in replace of onmouseout.

[zoobie]

I've already customized each class with cursor:hand but when I click on the button, the onmousedown still shows the pointer.

<style type="text/css">
.button {
width:91;
height:28;
background-color:transparent;
background-image:url(redblue.gif);
color:white;
font:bold italic 17 tahoma;
border:none;
cursor:hand;
}

.button_dn {
width:91;
height:28;
background-color:transparent;
background-image:url(redblue_d.gif);
color:white;
font:bold italic 17 tahoma;
border:none;
cursor:hand;
}
</style>

<input type="button" onfocus="this.blur();" value="ZOOBIE" class="button"
onMouseDown='this.className="button_dn"'
onMouseUp='this.className="button"'>

Maybe it's a result of using this type of styling with this.className.

Using the <input type="button"> rather than the <img src=blah.gif> looks more like a button because when you click on it, the text actually moves up and down, too.

However, if I were to use the onclick="this.src='image2.jpg'"; just how am I supposed to include the action of the button itself if onClick has already been used?

Thanks

[chrismiceli]

why do you have this.className? why not just this.class="button" ??