Image Button That Looks Like A Button

[neilkonitzer]

I hope that I am not missing something very simple here...

I want to create a button control that has an image displayed on it. I am trying to use the ImageButton control; however, the button doesn't "look" like a button. It appears to be nothing more than image control with an onclick feature.

How can I create a button control that looks like a button AND has an image displayed on it instead of text?

Thanks in advance!!!

Neil Konitzer
Freisoft

http://www.freisoft.com

 

[AtomicChip]

As far as I know, there are no built-in controls to do this. You would more than likely have to create a custom control.

-----------------------------------------------
"The night sky over the planet Krikkit is the least interesting sight in the entire universe."
-Hitch Hiker's Guide To The Galaxy

 

[dragonwell]

yes - you will need to get out photoshop/imageready, fireworks, gimp or some other bitmap editor and draw your own gif, png or jpg. Then use the Imagebutton. That's what it's for.

David

 

[dragonwell]

OH - maybe you were refering to a dynamic image? if the text on the button is going to vary cosiderably from request to request, you could have System.Drawing build you a button on the fly with what ever text you want. I've never done this, but I think it's pretty straightforward. This guy -

http://www.wilsondotnet.com

uses the technique for his menu/tabs and buttons on his site.

HTH,
David

 

[jfrost10]

OR...

you could just use CSS to create two classes for the image:

one for when the image isn't being clicked, and one for when it is.

Then in your code, you just set the style sheet for the image, as well as add an image.attributes.add("OnMouseDown", style = your css class).

Voila!

D'Arcy

 

[jfrost10]

Sorry, that wasn't super descriptive was it? Here was how I got it working in detail:

Put this in your CSS:

Input.ImgBtn
{
Border-Right:Outset;
BORDER-TOP: Outset;
BORDER-LEFT: Outset;
BORDER-BOTTOM: Outset;
}

Input.ImgBtnDown
{
Border-Right:Inset;
BORDER-TOP: Inset;
BORDER-LEFT: Inset;
BORDER-BOTTOM: Inset;
}

Now, on your image button (which should be the control you're using, NOT just an image), set the css class to be ImgBtn

Then, in the Page_Init of your code behind, add these two lines:

ImageButton.Attributes.Add("OnMouseDown", "className='ImgBtnDown'&quot

ImageButton.Attributes.Add("OnMouseOut", "className='ImgBtn'&quot

What this will do is cause the button to looked "clicked" when the user has their mouse down over it, and revert back to the regular button appearance if they move the cursor "out" of the button.

Voila!

hth

D'Arcy

 

[dragonwell]

Right on.

I like it....

David

 

[dragonwell]

Taking this even further...

You could use the css method and instead of using the beveling, actually use two different images - one that looks like it's being pressed and one that just sites there.

Input.ImgBtn    
{
    url='/images/buttonUp.gif';
}
Input.ImgBtnDown   
{
    url='/images/buttonDown.gif';
}
[code]

David
[pipe]

 

[jfrost10]

But then what if you needed that image without the borders?

Then you'd have to have three versions of the image:
- one for button
- one for button clicked
- one for just the image

Plus, you'd be dealing with multiple image files instead of just small classes within one css file.

All comes down to whatever floats your boat, but I'd go with the css way personally.


D