Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

background image in button

 
pradeep anandan
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Rancher
Posts: 13459
Android Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sorry, I didn't understand. Can you paste some sample code for what ou are doing?
Dave.
 
pradeep anandan
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 142
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:

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
Author and ninkuma
Marshal
Pie
Posts: 64633
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 64633
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In a web application, it's best not to use page-relative addressing. See this JSP FAQ entry.
 
Sean Bradshaw
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:



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
Ranch Hand
Posts: 142
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 64633
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 142
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic