Button with image in JSP

In JSP, how could we create a button with an image on it.
Normally in JSP we use something like :
<input type="submit" name="ButtonName" value="Submit"> to create a button
and we use < request.getParameter("ButtonName")> to invoke it.
How can we create a button with an image? and how to invoke the button. Thanks.

Not too sure how you are invoking with the request.getParameter() (I'm still fairly new to JSP), but you can certainly create a submit button with an image by using:
<input type="image" src="buttonimage.gif" height="100" width="100" name="ButtonName" value="Submit" />(Where or course src, width and height are dependant on your image.)
Hope that helps.

Similar Messages

Printing Buttons with Images

In my application, I am attempting to print a document that has both buttons with text and buttons with images, along with plain text.
When I print, the buttons with the images are larger than they ought to be (i.e. they don't fit within the area they were suppose to be drawn within (btw, for this application, I am using absolute positioning)).
However, this does NOT occur with the buttons that have only text and no image.
Can anybody tell me why this might be? It seems that to printing a JButton comes from the functionallity of JComponent.print, which simply sets a few printing flags and calls JComponent.paint.
So whatever changes those flags make, I would think they ought to effect all buttons the same?
Has anybody else run into this problem, and possibly found a solution for it?

myJButton.setSize(new java.awt.Dimension(<width>,<height>));
that line should do it. keep in mind that that will not resize your image. since you are using absolute positioning I will assume your button is of constant size. you should manually resize your images to be of the proper size for your buttons.

Radio Buttons with images

Hello everyone,
JDeveloper 11.1.1.7.0
Is it possible to have radio buttons with images instead of plain text?
If not, are you interested in having this kind of feature? I am ;-)
Thx.
Filip Huysmans

Hi Flip,
The user when switching between modes will fire an event to the server. This even needs to be caught in a bean and set a variable's value to either true or false.
Now you can treat "TRUE" to be in view and "FALSE" to be in edit mode.
Depending on this images can be changed.
Ex: your bean will be like
class catchMode{
private boolean mode;
public void changeMode(ActionEvent ae)
boolean modVal=this.getMode();
if(modVal) //if mode is true; i.e. view mode
this.setMode(false);
else if(!modVal) //in EDIT mode
this.setMode(true);
//Generate accessors for mode
in JSPX:
<af:image source="#{catchMod.mode eq true ? 'view.png' : 'edit.png'}"
Also the partialSubmit for the command component will be set to true
Thanks,
Pandu

PSD Rollover Button with image in front stops button from changing state

I have a wide PSD button that changes state when rolled over. I would like to place a PNG image with transparency in some areas over the top of it so that the rollover button shows through the transparent areas of the PNG.
How can you get it to do the rollover effect when the user mouses over the bit of the button that the image is in front of? Is ther a way of making the PNG 'invisible' to the mouse?
I know I could redesign the button so that it includes the image but I'm trying to keep file sizes and load times to a minimum, I use this button a lot on my website with a different on each, and having that number of individual buttons would result in a bloated, slow-loading website.

Hi Abhishek
Thanks for your reply. I was able to achieve the effect I wanted by having the PNG and the PSD Button with the same link and then grouping them. This means I can mouse over the PNG and still get the PSD rollover effect, which is perfect.
However I also have another similar problem. I have some different PSD Rollover Buttons which have some text in front of them (basically it's the button label). On some of these buttons when you roll over the text it prevents the rollover state of the button, and on other buttons the rollover effect occurs as it should, and there doesn't appear to be any consistency about which does what. Grouping or ungrouping doesn't appear to make a difference. Can you help?

Replace Buttons with Images.

Folks,
I have buttons in my application which perform a certain functions
by clicking on them.
I want to replace the buttons by gif/jpg images,so that when the
user clicks on them,it does the same set of functionality as discussed
above.
HOW CAN I REPLACE THE BUTTONS with Gif and implement the actionListener??

Hello,
there are several methods to set the icon for the button like setIcon and setRolloverIcon etc. You better setContentAreaFilled(false) if you want an icon-only button. Have a look at [url http://java.sun.com/j2se/1.4.2/docs/api/javax/swing/AbstractButton.html]AbstractButton for further information.
Regards,
Tim

Buttons with images in web!!! Please help-me!!!!

I want to publish mine forms 6i in web. They have buttons with figures. I already converted the figures of .ICO for .GIF. I already read diverse papers on the subject but I did not understand them. What I must make now?
I need step-by-step that to make now, therefore I have stated period to carry through this task and is if depleting. Who to know, please says which archives to me must edit, where to place the figures, etc.
Thanks!!!!!

Joao,
There is Registry.dat file in which there are two items:
default.icons.iconpath=
default.icons.iconextension=
My Registry.dat contains this:
default.icons.iconpath=/nis-img/
default.icons.iconextension=gif
The url /nis-img/ is defined in httpd.conf (I use Apache).
kind regards,
Ivan
I want to publish mine forms 6i in web. They have buttons with figures. I already converted the figures of .ICO for .GIF. I already read diverse papers on the subject but I did not understand them. What I must make now?
I need step-by-step that to make now, therefore I have stated period to carry through this task and is if depleting. Who to know, please says which archives to me must edit, where to place the figures, etc.
Thanks!!!!!

Flash button with images

hi,
I want to create a flash button,& for the button
different images should load for press & release events. also I
want to reuse this button. Please can someone tell me how to do
that

you'll need to use server-side scripting to handle part of the file upload and the file name retrieval from the upload folder. assigning the uploaded files names you'll do from flash. you'll use another script to retrieve the file names and in flash load and display which ever subset you want.

Problems: button with image

hallo,
i have the following problem:
I've written this class:
import java.awt.*;
public class ImageButton
extends Button
     private Image img;
     public ImageButton(String fname)
     img = getToolkit().getImage(getClass().getResource(fname));
          MediaTracker mt = new MediaTracker(this);
          mt.addImage(img, 0);
     try {
          //Warten, bis das Image vollst�ndig geladen ist,
          //damit getWidth() und getHeight() funktionieren
          mt.waitForAll();
          } catch (InterruptedException e) {
          //nothing
     public void paint(Graphics g)
          int a=(this.getWidth()-getPreferredSize().width)/2;
          int b=(this.getHeight()-getPreferredSize().height)/2;
          g.drawImage(img,a,b,this);
          super.paint(g);
     public void update(Graphics g)
          paint(g);
     public Dimension getPreferredSize()
          return new Dimension(
          img.getWidth(this),
          img.getHeight(this)
     public Dimension getMinimumSize()
          return new Dimension(
          img.getWidth(this),
          img.getHeight(this)
when the frame appears, where the button is shown, the icon is shown. But when I click on the button, the icon is away and i don't know, where is the problem.
I don't use swing because i don't like the perfomance.
why is the image away, when i'm clicking on the button or another frame is over the button and disappears.

just do not call super.paint(g) in paint() implementation

Invisible submit button with image rollover

I have a need to combine a rollover image with a form submit
button. I need the submit button to not be visible except for those
that know where to look.
I have a database query that displays rows of data. Each row
has a checkbox to select that item, so the data table is in a form;
the checkbox is a cfinput. In order to pass the parameters of the
checked items, a submit button must be used to submit the form
values.
My need is for the submit button to be the rollover image.
Only users that know where to find the rollover image will be able
to submit the list of checked form values. "Regular" users
shouldn't be in that area of the screen.
So, a combined rollover image submit button is needed.
Ideas? Thanks...Rick...

document.yourformname.submit didn't work.
But then discovered that the href value needs to be empty (or
"#") to work. This code works: (rollover images with the submit()
code):
<a href="#"
onClick="javascript:submit()"
onmouseover="MM_swapImage('Image9','','images/change-meeting-date.png',1)"
onmouseout="MM_swapImgRestore()">
<img src="images/blank-hidden-area.png"
name="Image9"
width="111"
height="11"
border="0"
id="Image9" />
</a>
When, in DW, you add the rollover image, you need to leave
the href value empty. I suppose that lets the submit button use the
<cfform action...> value as the results page, letting the
form values pass to the results page.
Now, the next step is to have two different rollover images
with submits() that point to two different result pages, while
still using one cfform. (Two submits in one form, each submit
pointing to a different results page.)
...Rick...

WPF Buttons with Images

I have the following button design that I'm aiming for:
http://i.imgur.com/nCymK5L.jpg
Could someone advise how I'd add an image to the left side of the button?
Also, if anyone could advise if I can add the thin black border easily?
My current markup:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Margin="30,6,0,0" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Thanks

>>Could someone advise how I'd add an image to the left side of the button?
You could just put a Grid with two columns inside the Border element and then put the image in the leftmost column of the Grid:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Width="25" Height="25" Grid.Column="0" Source="pic.png" Stretch="Fill" Margin="5 0 0 0"/>
<TextBlock VerticalAlignment="Center" Margin="3 0 0 0" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
>>Also, if anyone could advise if I can add the thin black border easily?
You could add another inner Border inside the outer one. Something like this:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="outerBorder" Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Border BorderThickness="1" CornerRadius="20">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=outerBorder}" Value="True">
<Setter Property="BorderBrush" Value="Gray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Width="25" Height="25" Grid.Column="0" Source="pic.png" Stretch="Fill" Margin="5 0 0 0"/>
<TextBlock VerticalAlignment="Center" Margin="3 0 0 0" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Hope that helps. It should at least get you the idea :)
Please remember to mark helpful posts as answer and/or helpful.

Create a button with image

I create a new button and set imageSource property with my image name (saved in mimes/components/<mycomponent>...).
The problem is that button don't display image.
If i try to use the same pic like image element it's all ok.
Someone has the same problem?
Thanks
Andrea

Hi!
I've met the same problem, but with a little bit another appearance:
- my gif files are saved in mimes/components/<component>
- when I do DC build locally (context menu DevComponent/Build)
- and then deploy (again context menu DevComponent/Deploy)
it works - images are shown in runtime.
I see .ear file (and wda inside ear), which contains my gif files in appropriate location.
Structure is (starting from root of wda):
- Applications
....<application> (empty folder)
- ComponentInterfaces
- Components
....<component>
........gif files
- PORTAL-INF
....folders (classes, lib, ...)
....webdynpro
........Applications
............<application>
................<application>.xml
........ComponentInterfaces
........Components
............<component>
................<component>.xml - no gif files in the folder
However when I download build result from CBS, the wda file has different structure - the only top level folder is "PORTAL-INF" and inside there are no gif files.
Correspondingly, when I deploy SCA, generated by CMS, the images are missing.
What should I do that server build will be similar to local build? I.e. how to bring "Components" top-level folder back in wda, when it's built by CBS?
Note: The problem appeared after upgrade from SP10 to SP12.
Any ideas?
Best regards,
Nick

Is it possible to add a button with image on the title bar(IDR)?

I look through all the buttons in the example, All of them does not with an image on them.
Is it posslbe to put a image on the title bar?
Best regards?
Blake Le

hi, Julia,
Sorry for the misleading. I want to add a button below the IDR area. And for common button it's OK.
Now the situation changed , i need to add an icon to a button , to make the user interface more beautiful.
Is that possible?
Best regards,
Thanks very much for your help.
Blake Le

Non-Rectangular Buttons with images

is it possible to create a non-square "button" in flash cs4
programmatically using as3?
Using a xml document, i'm trying to be able to retrieve a
.png file with transparency, and have said transparent area's be
not clickable.
Long story short, I'm creating a map with a bunch of
clickable areas. These areas are non-rectangular and I need them to
not obscure other area's which would be in their rectangle. I need
this to be done programmatically since the area's are going to be
dynamic as is the data attached to them.
fyi: I have a fairly good grasp of OOP, so don't be afraid to
post up complex instructions.

Now we're cooking with gas! Thank you so much for your
assistance!
The only issue left;
is it possible for the Events to penetrate through, so that
if two elements slightly overlap, the transparent part of obj1 will
allow a onclick (and subsequently the onmouseover) event on el2,
preferably dynamically so that I don't have to add event handlers
between the two.
Is there a simple way or do i need to calculate the overlap
using the x/y coords and width/height of each element, then
manually dispatch?
here's where I'm at thus far (with this discussion)
Firstly, the class for the movie clip,
then our frame.

Make a round button with image

i have image 40x40
i want to design a round button for it and when click no rectangle or squre is visible.
how can i design it
plz give me a line of code.
thanks

Put you image on a jlabel, then add a mouselistener to the label

Getting mouse click coordinates with image button

I'm using ADF Rich Client components in JDeveloper 11g Technology preview.
I have to get the mouse click coordinates with an image button. In the page I put something like this:
<af:commandButton text="commandButton1" icon="ambiente.jpg"
actionListener="#{prova.listen}" action="#{prova.esegui}" />
In the listener method of the managed bean I try to get the coordinates with this code:
public void listen(ActionEvent e)
FacesContext context = FacesContext.getCurrentInstance();
String clientId = e.getComponent().getClientId(context);
Map requestParams =
context.getExternalContext().getRequestParameterMap();
int x =
new Integer((String) requestParams.get(clientId + ".x")).intValue();
int y =
new Integer((String) requestParams.get(clientId + ".y")).intValue();
but it doesn't work. It seems that there aren't in the request the coordinates of the image point clicked. Is it true? How can I do that with ADF ?

Hi,
the mouse position is not part of the request parameters send. You will have to use client side JavaScript for this
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<af:document>
<f:verbatim>
<![CDATA[
<script>
function handleMouseCoordinates(event) {
alert("x: "+event.getPageX()+" y: "+event.getPageY());
</script>
]]>
</f:verbatim>
<af:form>
<af:commandButton text="My Click Button" icon="/images/jdev_cup.gif">
<af:clientListener method="handleMouseCoordinates" type="click"/>
</af:commandButton>
</af:form>
</af:document>
</f:view>
</jsp:root>
Frank

Button with image in JSP

Similar Messages

Maybe you are looking for