background image in button

[pradeep anandan]

Dear Friends,
When i give style="BACKGROUND-IMAGE for a button
it allows only for absoulete path only. I am not able to add the image in a relative path.
Can anybody has the solution.
Regards,
Pradeep

[David O'Meara]

Sorry, I didn't understand. Can you paste some sample code for what ou are doing?
Dave.

[pradeep anandan]

Hi David
This is my code
<input type="button" name="BTN_LOV_FORMULA" style="BACKGROUND-IMAGE: url(file://H:\webapps\examples\jsp\Work\image\s_b_detl.gif) ; HEIGHT: 19px; WIDTH: 20px"
where the path of the image is the absoulete path.
where as my I need is a relative path like
<input type="button" name="BTN_LOV_FORMULA" style="BACKGROUND-IMAGE: url(file://..\image\s_b_detl.gif) ; HEIGHT: 19px; WIDTH: 20px"
for which I am not able to get the output of a image in the button.
Regards,
pradeep

[ugo marino]

try to write

<input type="button" name="BTN_LOV_FORMULA" style="BACKGROUND-IMAGE: url(../image/s_b_detl.gif); HEIGHT: 19px; WIDTH: 20px"
[ September 19, 2005: Message edited by: ugo marino ]

[Jan Sterk]

Since this thread is 6 years old, I don't think the original poster minds that I'm stealing his thread

I have the following code:

<input type="button" style="background-image: url(editbutton.gif); width: 64px; height: 18p; background-color: transparent" ...>

editbutton.gif is in the same directory as the .jsp that contains the code. However, no luck. The button doesn't show the image. I tried numerous variations..
[ June 19, 2008: Message edited by: Jan Sterk ]

[Bear Bibeault]

In the future, it would be best to start a new topic rather then resurrect a 6-year old zombie.
[ June 19, 2008: Message edited by: Bear Bibeault ]

[Bear Bibeault]

In a web application, it's best not to use page-relative addressing. See this JSP FAQ entry.

[Sean Bradshaw]

I don't think the <input type="button"> tag is what you're looking for. There are a few options that would be more fitting. <input type="image" src="image.gif"> functions as a button but shows an image. Or even the HTML4 spec using the <button></button> tags then you can put an <img> tag or any other text content in there as well.

Really with Javascript events this is a user interface issue. Why do you want to use an input tag, is it because you need to send some data from that button to the next page? Or do you want the cursor to stay as an arrow rather than change to a hand like a normal link? Without it changing to a hand and without a hover effect of some sort, the user may not even realize it is a clickable link.

So I'd recommend something like this:

<a href="#" onclick="document.form[0].submit();"><img src="image.gif"></a>

Well at least if you don't mind having your event logic inside your HTML page. To make that even more noticeable as an actionable link, you could add onmouseover="this.src='image-hover.gif';" onmouseout="image.gif" to the image tag to make it a little more dynamic.
[ June 19, 2008: Message edited by: Sean Bradshaw ]

[Jan Sterk]

Thank you all for your replies.

I'm taking Sean's route with <href><button>. Strange thing is, the href works fine with .html links, but not with servlet links.

On a click event, I want to go to a (front controller) servlet. It needs a few request parameters, but that can be done by creating a query string with EL.

[Bear Bibeault]

Originally posted by Jan Sterk:
Strange thing is, the href works fine with .html links, but not with servlet links.

That usually means that you are using page-relative URLs rather than proper server-relative URLs.

Remember, the browser has no notion of what the servlet mappings on the server are, so there really is no concept of a "current page" and URLs that are relative to it won't properly resolve.

See the JSP FAQ for more info.

[Jan Sterk]

OK, problem solved. I used <href a=..> instead of <a href=..> Got no clue how I got the .html testlink working with it, or how I mixed things up..

Reading the url faq is a nice spin-off however, it is certainly a good practice to use relative url's.