Image change on button click

Hello all,
I'm currently creating a website for my photography. I've created the layout and have begun to add content into the site. The website is not yet published as there are still a few things left to finish before I upload it for all to see.
On the index page, I have a placeholder for several photos to be placed. What I would like to be able to do is have one image load when the user loads the page and then have a link that when clicked changes the image placeholder to another image.
Hopefully there is a way of doing this.
Thank you in advance.
Chris.

On the index page, I have a placeholder for several photos to be placed.
You could automatically cycle through an array of images using jQuery and the Cycle Plug-In
http://jquery.malsup.com/cycle/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Image icon change on button click

so i got a problem with this program. So basically the program has an image, which i used a iconimage with a label. I want it that when i click the button the image changes to another image. This is my code, it runs fine but doesnt do what its sopposed to do, the image change....
import java.awt.;
import java.awt.event.;
import javax.swing.;
import javax.swing.event.;
public class horseRaddish extends JFrame{
JLabel lblPic;
JButton btnUpload,btnSlap;
ImageIcon imgBefore, imgAfter;
GridBagLayout gb;
GridBagConstraints gbc;
horseRaddish(){
gb = new GridBagLayout();
setLayout(gb);
gbc = new GridBagConstraints();
imgBefore = new ImageIcon("me1.jpg");
imgAfter = new ImageIcon("me2.jpg");
lblPic = new JLabel(imgBefore);
btnUpload = new JButton("upload");
btnSlap = new JButton("Slap");
btnUpload.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent ae){
lblPic = new JLabel(imgBefore);
btnSlap.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent ae){
lblPic = new JLabel(imgAfter);
gbc.fill = GridBagConstraints.BOTH;
addComponent(lblPic,3,3,3,3);
gbc.fill = GridBagConstraints.BOTH;
addComponent(btnUpload,9,4,1,1);
gbc.fill = GridBagConstraints.BOTH;
addComponent(btnSlap,9,5,1,1);
public void addComponent(Component c,int row,int col,int nrow,int ncol)
gbc.gridx=col;
gbc.gridy=row;
gbc.gridwidth=ncol;
gbc.gridheight=nrow;
gb.setConstraints(c,gbc);
add(c);
public static void main(String args[]){
horseRaddish hr = new horseRaddish();
hr.setSize(600,700);
hr.show();
}thank you for reading

Your code unfortunately shows that you have a misunderstanding of some fundamentals in Java programming. You can't just reassign a JLabel member in your class, that won't update the GUI. The label in the GUI will remain unchanged. You've changed what JLabel the field references, but not the one being displayed.
Fortunately, the fix is easy enough. In your ActionListeners, instead of:
lblPic = new JLabel(imgBefore);do this:
lblPic.setIcon(imgBefore);That way you're changing the icon displayed by the JLabel in the GUI.
But I also recommend you take a step back and review some basics:
[The Java Tutorial|http://java.sun.com/docs/books/tutorial/]
[Trail: Creating a GUI with JFC/Swing|http://java.sun.com/docs/books/tutorial/uiswing/]

Why does the quality of my images change after I click on Save For Web?

After I click on "Save For Web" the quality of my images changes, how can I stop this?
I use photoshop CC on a macbook.
Thanks in advance!
Bo

Good day!
Could you please post screenshots to illustrate the issue?
Regards,
Pfaffenbichler

Adjust Image Problem - Image Changes when Mouse Click is Released.

I love the fact that images can be adjusted after insertion into a page (Things like brightness, contrast etc). The problem I have which is very frustrating is that while any control on the Adjust Image panel is selected and being edited (click and hold mouse button to move a slider), the images' contrast and brightness change (perhaps as if to indicate selection?). This is inherently a problem since it's these very characteristics you're trying to edit. So you adjust the image to your liking but when you release the mouse button, then image then suddenly changes and is no longer the way you want it. Anyone else seen this problem and have any helpful suggestions?

I have been trying to replicate your issue using different format images..but I did not succeed.
If its not images and types that cause the problem, then the inference is that it the application.
The usual advice... unless you want to contact tech support and present your problem to them - is to uninstall iBA with Appdelete or similar rather than dragged to the trash, and then do a reinstall.
This presupposes you saved everything/copies etc,.
BTW, I seldom use the various sliders, with practice using the LEVELS can be more effective, have you tried this option?

Change Image of a Button

Hey,
I'm searching for the command for changing the image of a button, after that is clicked. (iPhone OS)
I added an outlet to my app:
IBOutlet UIButton *myOutlet1;
But I don't know how to change the picture after the click!
Can someone please give me the code to do that?
I'm new to iPhone development.
THANK YOU VERY MUCH!!!

Here is an example of how you might set up a button to handle all four states. This assumes that the images are in your bundle (in Xcode, you have added them to the project in the "Resources" section).
[myOutlet1 setImage:[UIImage imageNamed:@"DOA_NORMAL.jpg"] forState:UIControlStateNormal];
[myOutlet1 setImage:[UIImage imageNamed:@"DOA_HIGHLIGHTED.jpg"] forState:UIControlStateHighlighted];
[myOutlet1 setImage:[UIImage imageNamed:@"DOA_DISABLED.jpg"] forState:UIControlStateDisabled];
[myOutlet1 setImage:[UIImage imageNamed:@"DOA_SELECTED.jpg"] forState:UIControlStateSelected];

Can you change toolbar button images in SQL Server 2012?

In SQL Server 2012 management studio I do not see an option to change the button image of the buttons on the toolbar.
In previous versions of SQL, you could go to Tools --> Customize --> Rearrange Commands, select the toolbar, click on a command and then click "Modify Selection". One of the resulting choices was "Change Button Image". You could
choose a different image for the toolbar button you selected. Another choice was "Edit Button Image" which allowed you to create a completely new image for your toolbar button.
I do not see any way to do this in SQL Server 2012. Has this functionality been removed or am I just not finding it?
Thanks,
Alan

Hi Alan,
Based on your description, I make a test in SQL Server 2012, and I also find that there is no option to change button image or edit button image when customizing toolbar. It seems that the functionality has been changed from SQL Server 2012.
Therefore, If you concern about this feature, I recommend you submit the requirement at
https://connect.microsoft.com/SQLServer/ . If the requirement mentioned by customers for many times, the product team may consider to add this feature. Your feedback is valuable for us to improve
our products and increase the level of service provided.
Thanks,
Lydia Zhang

Changing an image to a button event.....what am i doing wrong here?

I'm trying to change the image in the imagePanel when one of the buttons are clicked. When I run it, it just shows the default image i placed in there and nothing happens when a button is clicked. I'm a Java student so I'm sorry if this seems elementary. Please ignore the jbtSound button I created, i haven't got to that yet. Thanks in advance for whatever help you can offer. Here's the code:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class cah334Final extends JFrame
JButton jbtFruit = new JButton("Fruit");
JButton jbtVege = new JButton("Vegetable");
JButton jbtReset = new JButton("Reset");
JButton jbtSound = new JButton("Listen");
ImageIcon imgDefault = new ImageIcon("fruits_and_vegetables.jpg");
ImageIcon imgFruit = new ImageIcon("FruitBasket.png");
ImageIcon imgVege = new ImageIcon("veggies.jpg");
//Create a panel to hold image
JPanel imagePanel = new JPanel();
public cah334Final()
//set frame layout
setLayout(new FlowLayout(FlowLayout.CENTER, 10, 20));
//add panel to hold image
add(imagePanel);
//add label and default image
imagePanel.add(new JLabel(imgDefault));
//add listeners for buttons
jbtFruit.addActionListener(new ChangeImage());
jbtVege.addActionListener(new ChangeImage());
jbtReset.addActionListener(new ChangeImage());
//add panel to hold buttons and layout panel
JPanel buttonPanel = new JPanel();
buttonPanel.setLayout(new GridLayout(2, 2, 5, 5));
//add buttons to panel
buttonPanel.add(jbtFruit);
buttonPanel.add(jbtVege);
buttonPanel.add(jbtReset);
buttonPanel.add(jbtSound);
//add button panel to frame
add(buttonPanel);
//tool tips set for the buttons
jbtFruit.setToolTipText("Click to choose a fruit");
jbtVege.setToolTipText("Click to choose a vegetable");
jbtReset.setToolTipText("Click to reset the picture");
jbtSound.setToolTipText("Click to hear a message");
}//end of constructor
public static void main(String[] args)
JFrame frame = new cah334Final();
frame.setTitle("Carol's CIS 334 Form");
frame.setSize(500, 500);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}//end of main
class ChangeImage implements ActionListener
public void actionPerformed(ActionEvent e)
{//HERES THE PROBLEM
if (e.getSource() == jbtFruit) //fruit button clicked
imagePanel.add(newJLabel(imgFruit)); //tried to do imagePanel.setIconImage(imgFruit); but it didn't work
else if (e.getSource() == jbtVege) //vege button clicked
imagePanel.add(new JLabel(imgVege));
else if (e.getSource() == jbtReset) //reset button clicked
imagePanel.add(new JLabel(imgDefault));
}//end of actionPerformed
}//end of ChangeImage
}//end of class

Thank you for your help. Sorry about the format, I'll do better next time :)
I got it to work. Here's what I came up with:
class ChangeImage implements ActionListener
     public void actionPerformed(ActionEvent e)
          if (e.getSource() == jbtFruit)
               lblimage.setIcon(imgFruit);
          else if(e.getSource() == jbtVege)
               lblimage.setIcon(imgVege);
          else if(e.getSource() == jbtReset)
               lblimage.setIcon(imgDefault);
          }//end of actionPerformed
     }//end of ChangeImageNow I just have to figure out how to add this audio clip in and I am finished!
Thank you for taking the time to read my code and help me out.

Display an image on button click?

Hi,
I'm using Captivate 3 and trying to set up an image to be
displayed in a certain position on the screen when a button is
clicked. It would always be on the top layer to overlay anything
else on the screen at the time. I need to do this for multiple
slides so it would be way too confusing to try to use multiple
slides to accomplish this.
I am thinking it might be javascript? (I don't know what the
code would be though) But I realize it might just be another trick.
I thought this would be a popular request but searching in the
forums and Google hasn't yielded anything helpful yet.
Thanks!
-Dan

Hi Rick,
Let me back up a step and explain the issue with my project.
I'm creating an interactive software simulation using png images of
the application pages and inserting click boxes and buttons to give
the illusion the user is in a 'real' training environment. The
application is a windows based one, with three types of navigation;
tabs, icons and menus. Creating the tab navigation was pretty
straightforward, I put an image of each tabbed page on its own
captivate slide and included click boxes to link the proper tabs to
the proper pages. Looks pretty good so far.
My challenge is with the menu options. I would like the user
to be able to select a menu option, see the drop down image of the
choices, click on the choice and go to the correct new page. The
challenge is the layering and timing. The menu options are on the
same pages as the tab page images, the timing is already tied into
what needs to happen with the tab images. So I was hoping if I
could find a way to put a hot spot over say, the File menu, have
the menu options appear, and have the user click on an option to be
taken to the new page. Using the timeline, I set the first menu
option to pause at 1.5 seconds, then the new menu option image
would appear after clicking, then a hot spot on the menu option
image would take the user to the new correct page. Still with me
If I use the timing feature, and click on a menu for the drop
down image to appear, then all the drop down images appear. That's
why I think your idea of a success caption is potentially
brilliant. I tried making a custom caption by selecting Success
Caption>Custom and then selecting the image bmp that I saved in
the Adobe Captions gallery. On previewing, the image is not in the
success caption. So I looked further at the gallery and the images
there have files with .FCM extensions. Looks to be some type of
text file, not sure?
So... <whew> there's my dilemma. Bottom line I am
looking for best practices to create a software simulation (without
using motion recording because I also need to create these in large
quantity with minor image changes... John Doe and Jane Doe and
such) when the software has integrated tab, menu and icon
navigation.
Your thoughts?
thanks
Karen (working with Dan
)

I have both Photoshop 4 and Photoshop 6 on my computer. When I am in Bridge and want to open an image by double clicking, it automatically opens in 6. I see, when I go to "open with" 6 is listed as "default" How can I change the "double click" defult to o

I have both Photoshop 4 and Photoshop 6 on my computer. When I am in Bridge and want to open an image by double clicking, it automatically opens in 6. I see, when I go to "open with" 6 is listed as "default" How can I change the default to open an image with a double click in 4?

You can associate files from the Bridge level and the Desktop level.
In Bridge CS4, go to Preferences > File Type Associations and change it to Photoshop CS4 for the file types you want.
If you want to open files from the Windows Desktop in CS4, these are the instructions:
Do this from the Windows Desktop:
If you want your image file to open in Photoshop and it doesn't, right click on it and choose
Open with > Choose default program… select Photoshop CS4 or CS6 and checkmark "always use the selected program to open this type of file".

Resizing JFrame on button click to show an image on the JFrame

Dear All,
I have a JFrame which has an empty label. On button click I want to set an icon for the label and want the JFrame to be resized to show that icon. I am using frame.pack() and I am not using any other sizing function. The code that I have right now, prints the image on the panel, but does not resize the frame to show the image. Pleae could someone help.package gui;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
public class ComponentDemo extends JPanel implements ActionListener,
ItemListener, MouseListener, KeyListener {
     private JTextArea textarea;
     private JButton button;
     private final static String newline = "\n";
     private JLabel imageIcon;
     public ComponentDemo() {
          button = new JButton("JButton welcomes you to CO2001");
          button.addActionListener(this);
          add(button);
          textarea = new JTextArea(10, 50);
          textarea.setEditable(false);
          addMouseListener(this);
          textarea.addKeyListener(this);
          JScrollPane scrollPane = new JScrollPane(textarea);
          add(scrollPane);
          imageIcon = new JLabel();
          add(imageIcon);
          setBackground(Color.pink);
          new JScrollPane(this);
      * Create the GUI and show it. For thread safety, this method should be
      * invoked from the event-dispatching thread.
     private static void createAndShowGUI() {
          // Create and set up the window.
          JFrame frame = new JFrame("Simple FrameDemo");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
          frame.setLocation(700, 200);
          // get the content pane and set the background colour;
          frame.add(new ComponentDemo());
     //     frame.setSize(screenSize);
          // frame.getContentPane().setBackground(Color.cyan);
          // Display the window.
          frame.pack();
          frame.setVisible(true);
          frame.setResizable(true);
     public static void main(String[] args) {
          // Schedule a job for the event-dispatching thread:
          // creating and showing this application's GUI.
          javax.swing.SwingUtilities.invokeLater(new Runnable() {
               public void run() {
                    createAndShowGUI();
     @Override
     public void actionPerformed(ActionEvent e) {
          // TODO Auto-generated method stub
          if (e.getSource() instanceof JButton) {
               // System.out.println(e.getSource());
               String text = ((JButton) e.getSource()).getText();
               textarea.append(text + newline);
               textarea.setBackground(Color.cyan);
               textarea.setForeground(Color.BLUE);
               textarea.setCaretPosition(textarea.getDocument().getLength());
               imageIcon.setIcon(createImageIcon("SwingingDuke.png",
               "Image to be displayed"));
     @Override
     public void itemStateChanged(ItemEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseClicked(MouseEvent arg0) {
          textarea.append("A Mouse click welcomes you to CO2001" + newline);
          textarea.setBackground(Color.green);
          textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void mouseEntered(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseExited(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mousePressed(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseReleased(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void keyPressed(KeyEvent e) {
          System.out.println(e.getKeyChar());
          textarea.append("The key " + e.getKeyChar()
                    + " click welcomes you to CO2001" + newline);
          textarea.setBackground(Color.YELLOW);
          textarea.setFont(new Font("Arial", Font.ITALIC, 16));
          textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void keyReleased(KeyEvent e) {
          System.out.println(e.getKeyChar());
          // textarea.append("The key "+
          // e.getKeyChar()+" click welcomes you to CO2001" + newline);
          // textarea.setBackground(Color.green);
          // textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void keyTyped(KeyEvent e) {
          // TODO Auto-generated method stub
          System.out.println(e.getKeyChar());
          // textarea.append("The key "+
          // e.getKeyChar()+" click welcomes you to CO2001" + newline);
          // textarea.setBackground(Color.blue);
          // textarea.setCaretPosition(textarea.getDocument().getLength());
     /** Returns an ImageIcon, or null if the path was invalid. */
     protected ImageIcon createImageIcon(String path, String description) {
          java.net.URL imgURL = getClass().getResource(path);
          if (imgURL != null) {
               System.out.println("found");
               return new ImageIcon(imgURL, description);
          } else {
               System.err.println("Couldn't find file: " + path);
               return null;
}

myJPanel.setPerferredSize(new Dimension(new_width, new_hight));
myJFrame.pack();

Multiple flash files change when a button click using javascript function

hi.. am new in flsh...
i want to multiple flash files change when a button click using a javascript

<script>
var count=0;
function mafunct(newSrc){
    alert("hi");
var path="a"+count+".swf";
flash+='<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" WIDTH="100%" HEIGHT="100%">';
    flash+='<PARAM NAME=movie VALUE="'+path+'">';
    flash+='<PARAM NAME="PLAY" VALUE="false">';
    flash+='<PARAM NAME="LOOP" VALUE="false">';
    flash+='<PARAM NAME="QUALITY" VALUE="high">';
    flash+='<PARAM NAME="SCALE" VALUE="SHOWALL">';
    flash+='<EMBED NAME="testmovie" SRC="Menu.swf" WIDTH="100%" HEIGHT="100%"PLAY="false" LOOP="false" QUALITY="high" SCALE="SHOWALL"swLiveConnect="true"PLUGINSPAGE="http://www.macromedia.com/go/flashplayer/">';
    flash+='</EMBED>';
    flash+='</OBJECT>';
count++;
alert(path+"aa");
</script>
<button onclick="mafunct()">next</button>

How to change an image only when button is pressed

is there an easy way to make the image in a uiimageview change to a different image while a button is being pressed? then, once the user stops pressing the button, the image view needs to return to the first image.
thanks in advance!

Hey , U can handle that with Touches ,
But in a simply way
Use Touchupinside to show the pressed image ,
and use Touchupouside to show the normal image.
This may give you the same impression.
Thanks
Srikanth

On Button click change the button display text from LOCK to UNLOCK

Hi Freinds,
I am rendering a TreeByNestingTableColumn with two columns like: Name , Status as below shown. In The status column I inserted a Table Cell editor Button type and the button element property text mapped to the context attribute called statusButton and set the button name in the code to display as LOCK. When the tree renders all the vales are displaying in status column as LOCK. Now whrn the user click on LOCK i should fire the event and change the button text from LOCK to UNLOCK. The same way when they click on UNLOCK and i have change to LOCK. please help how to do this.
   Name                          Status
|> Employee1------------------LOCK (when i click on lock button here, his and under neath of him button status should
        |>Employee2-----------LOCK    change from LOCK status to UNLOCK)
               |>Employee3----LOCK
Thanks in advance.
Thanks
Srini

Armin,
Yes I removed the method and created the calicualted value as you suggested and I able to get the out put what i have asked.
My complete scenario is some thing like this, i able to complete upto certain level but not able to make it work for complete scenario, I appreicate your comments or advice for getting me the below output
I have a TreeByNestingTableColum UI rendering with three columns as NAME(node |>), STATUS(Toggle Button) and PLANNING (Text view) (developed based on sample tutorial Integration of a Tree Structure in a Web Dynpro Table.pdf)
I am trying to get this output:
From the sap backed i am getting flag value, based on that i have to render Tree UI columns NAME, STATUS(Toggle Button) and PLANNING (Text view). if the flag is null i have to show as LOCK and In Planning else Unlock and Submitted (please see the below picture for clear idea)*
if (statusflag = ""){
i have to show values in two columns like Lock ...Planning
} else
show values in two columns like Un Un Lock ...Submitted
One more thing is , If i lock a record at secound node level , then all the records should locked underneath of that node (it could be 2 nodes or 10 nodes) and then the status column values should change from lock to Unlock and Planning column values should change from In Planning to Submitted. where as when i Click on Unlock , only that perticular record (not node level) should changed from unlocked to Lock and planning is from Submitted to In Planning.
This is the functionality actually I am looking for.
Here the tree sample:
Name                        Status              Planning
|>M1                         Lock                 In Planning
   |>M2                      Lock                 In Planning
     *M2a                    Lock                 In Planning
   |>M3                    Un Lock                Submittd
Thank you.
Srini

How to change the button's clicked color

Dear all,
How to change the button's clicked color
I want it to be white in color as my button's background color is white
Thanks

How to change the button's clicked colorvia the UIManager

Tree node images changes.. with start and stop button

I create the animator extends JPanel, which start and stop can be controlled with Swing Timer. It works fine with animation control over the panel.
Now, I have a tree with each image at each node.
when the start button clicks, one node image should be animated.
It is implementable. If animation.gif would have worked, I did't have to do this, but animation gif has fatal error with time interval.
any words would be appreciated. Thanks =

Damn !
With version 1.2.1 I think you'll have to create a new class that extends PositionPathInterpolator and add a pause() anr resume() method to it.
i suggest something like:
public class MyPositionPathInterpolator() extends PositionPathInterpolator {
// add some constructors if necessary
private float pauseAlphaValue = 0;
// override computeTransform method
public void computeTransform(float alphaValue, Transform3D transform) {
   float newAlphaValue = alphaValue + pauseAlphaValue; // calculate new alpha value
   if(newAlphaValue > 1) // modify it if it is out of bounds
      newAlphaValue -= 1;
   else if (newAlphaValue < 0)
      newAlphaValue += 1;
   super.computeTransform(newAlphaValue, transform); // computeTransform with the right alpha value
public void pause() {
   this.setEnable(false); // it won't compute transform anymore
   pauseAlphaValue = this.getAlpha().value(); // retrieve current alphavalue
public void resume() {
   pauseAlphaValue -= this.getAlpha().value();
   this.setEnable(true) // restart computing transform
}Now you invoke pause and resume methods on your myPositionPathInterpolator object when user clicks on the buttons.
Of course it is a trick and it will work only with increasing alpha.
c ya
GnG

Image change on button click

Similar Messages

Maybe you are looking for