In this tutorail our goal is to change the image according to the user input. We may do it in several ways either putting a button or defining a link or changing the pictures location whenever mouse moves. Since it's the most prefered and easy to adjust one we will focus on creating an application that detects mouse movements and changes the icon on the screen correspondingly.
This program is designed for indivuduals who have a basic knowledge in java and programming languages,
To begin with we need to define the librariese that we are gıing to use in this example. Since we will work on Applet the very first library we need is java.awt library.
import java.awt.Graphics2D;
The 2D graphics library extends the current Applet library to give more geometrical coordinate based transformations. With this library it becomes easier to control objects inside the library. You may also use this library to arrange the position of text, vector or drawing locations. Now to obtain the mouse movements and record them we need add a library that is capable of mouse actions. In Applet this library is called as MouseEvenet and Mouse listener to get the pressing , clicking, and click duration like events. This can also be used to make an click base, mouse controled games which we will in our further tutorials. Below libraries added to observe the user's mouse behaviour,
import java.awt.event.MouseListener;
import java.awt.event.MouseEvent;
Then to use icons arrange and locate them we need to add below libraries,
import javax.swing.ImageIcon;
import java.awt.FlowLayout;
Now we can start calling our class,
public class mouse_events extends JApplet implements MouseListener, MouseMotionListener
We should first locate the first image and define the width height properties of the Applet,
int BirdX = 10;
int BirdY = 10;
ImageIcon Picture;
int Width = 0;
int Height = 0;
Then we can define the initail position of the image and we can even declare the image too,
Picture = new ImageIcon(getImage(getDocumentBase(), "bird1.gif"));
Above code will give default bird gif as ImageIcon. Now since we want this image to change according to mouse clicks we need to add inital value for mouse click change it after every click. You can change this behaviour like changing image with button pressing or mouse rotation.
setLayout(null); // first set the layout null
addMouseListener(this); // we'r adding the listener to mouse
addMouseMotionListener(this); // also adding the motion listener to mouse
Now we can get the width height properties of the picture that we can later use it to adjust other images that will come whenever mouse clicks,
Width = Picture.getIconWidth(); // take the width and the height
Height = Picture.getIconHeight();
Now we can locate the picture according to the define x,y value. You may change this value if you want your initail picture to locate in a different place on Applet.
PictureHolder.setLocation(BirdX, BirdY); // x and y axis been set
Then we can set the size of image and add it on the screen. This will set the height and width of the image equal as it's original version,
PictureHolder.setSize(Picture.getIconWidth(), Picture.getIconHeight()); // and sizes also
add(PictureHolder); // finally adding the PictureHolder
Now after defining and adding the picture we need to make another object that is capable of changing pictures with mouse movements and clicks. In this turoail we pick an exmaple bird.gif you may change it according to your interest,
// Mouse Listeners
public void mouseExited(MouseEvent theMouseEvent){
BirdName("bird5.gif");
}
public void mouseReleased(MouseEvent theMouseEvent){
BirdName("bird3.gif");
}
public void mouseEntered(MouseEvent theMouseEvent){
BirdName("bird1.gif");
}
public void mouseClicked(MouseEvent theMouseEvent){
BirdName("bird1.gif");
}
public void mousePressed(MouseEvent theMouseEvent){
BirdName("bird2.gif");
}
Now we need a location definiton for each of these pictures. We wanted eah picture to locate 10 pixels right and below of the previous one so that we add 10 to theMouseevent action,
public void mouseMoved(MouseEvent theMouseEvent){
PictureHolder.setLocation(theMouseEvent.getX() + 10, theMouseEvent.getY() + 10);
Now finally we can call the bird icon from the image file and locate it on the applet,
public void BirdName(String _birdName){
ImageIcon Picture = new ImageIcon(getImage(getDocumentBase(), _birdName));
PictureHolder.setIcon(Picture);
}
Now our code is ready to test. We can test it in any IDE that supports java. Since its quite popular this application is tested on Eclipse ide.
The overall code of the applicaton,
import java.awt.Graphics2D;
import java.awt.FlowLayout;
import java.awt.event.MouseListener;
import java.awt.event.MouseEvent;
import javax.swing.ImageIcon;
import java.awt.event.MouseMotionListener;
import javax.swing.JApplet;
import javax.swing.JLabel;
public class mouse_events extends JApplet implements MouseListener, MouseMotionListener {
JLabel PictureHolder = new JLabel();
JLabel MouseEvents = new JLabel();
int BirdX = 10;
int BirdY = 10;
ImageIcon Picture;
int Width = 0; int Height = 0;
public void init() {
setLayout(null); // first set the layout null
addMouseListener(this); // we'r adding the listener to mouse
addMouseMotionListener(this); // also adding the motion listener to mouse
Picture = new ImageIcon(getImage(getDocumentBase(), "bird1.gif")); // and give default bird gif as ImageIcon
Width = Picture.getIconWidth(); // take the width and the height
Height = Picture.getIconHeight();
PictureHolder.setIcon(Picture); // with this code seting the icon the default picture
PictureHolder.setLocation(BirdX, BirdY); // x and y axis been set
PictureHolder.setSize(Picture.getIconWidth(), Picture.getIconHeight()); // and sizes also
add(PictureHolder); // finally adding the PictureHolder
}
// Mouse Listeners
public void mouseExited(MouseEvent theMouseEvent){
BirdName("bird5.gif");
}
public void mouseReleased(MouseEvent theMouseEvent){
BirdName("bird3.gif");
}
public void mouseEntered(MouseEvent theMouseEvent){
BirdName("bird1.gif");
}
public void mouseClicked(MouseEvent theMouseEvent){
BirdName("bird1.gif");
}
public void mousePressed(MouseEvent theMouseEvent){
BirdName("bird2.gif");
}
// Mouse Motion Listeners
public void mouseMoved(MouseEvent theMouseEvent){
PictureHolder.setLocation(theMouseEvent.getX() + 10, theMouseEvent.getY() + 10);
}
public void BirdName(String _birdName){
ImageIcon Picture = new ImageIcon(getImage(getDocumentBase(), _birdName));
PictureHolder.setIcon(Picture);
}
}
And the output after generation the code is shown below. Note by changing above methods, you can adjust the position of the image, the action required to go next image or even make mouse click based games.