How to get images as buttons and display one image for one click

**Thevercad** · Nov 2 '06, 05:20 AM

hi,

i get your problem..
but when you click on the image buttons, the corresponding image should appear in a new window or in the same window as the image buttons?

**rajbala** · Nov 2 '06, 07:04 AM

Originally posted by Thevercad

hi,

i get your problem..
but when you click on the image buttons, the corresponding image should appear in a new window or in the same window as the image buttons?

Hai,

Thanks forur reply.The corresponding image should appear in a same window as image buttons but in another frame.Hope you will get this.

Thank you

**Thevercad** · Nov 2 '06, 07:31 AM

hi,

i'm quite ignorant about the frames. But i have done it using divs.. and i have written down the code below.

the html code :

Code:

<html>
    <head>
    </head>
    <body>
        <img id="Btn1" src="img1.gif" onClick="showImg(this)" />
        <img id="Btn2" src="img2.gif" onClick="showImg(this)" />
        <img id="Btn3" src="img3.gif" onClick="showImg(this)" />
        <div id="Photo1" style="display:none"><img id="img1" src="spacer.gif" ></div>
        <div id="Photo2" style="display:none"><img id="img2" src="spacer.gif" ></div>
        <div id="Photo3" style="display:none"><img id="img3" src="spacer.gif" ></div>
    </body>
</html>

The spacer.gif that i have used above is a transparent gif file, that has 1pixel width and 1pixel height.

The code for the function showImg():

Code:

<script language="javascript">
    var EmptyImg;
    var pointer=0;
    function showImg(imgObj){
        var imgObj1=document.getElementById('img1');
        var imgObj2=document.getElementById('img2');
        var imgObj3=document.getElementById('img3');
        if(EmptyImg==null){
            imgObj1.src=imgObj.src;
            document.getElementById('Photo1').style.display='block';
            EmptyImg = imgObj1.src
        }
        else if(imgObj2.src==EmptyImg){
            imgObj2.src=imgObj.src;
            document.getElementById('Photo2').style.display='block';
        }
        else if(imgObj3.src==EmptyImg){
            imgObj3.src=imgObj.src;
            document.getElementById('Photo3').style.display='block';
        }
        else{
            if(pointer==0){
                imgObj1.src=imgObj.src;
                pointer=1;
            }
            else if(pointer==1){
                imgObj2.src=imgObj.src;
                pointer=2;
            }
            else if(pointer==2){
                imgObj3.src=imgObj.src;
                pointer=0;
            }
        }
    }
</script>

i would first advise you to copy the html code, along with the javascript function, and run it to see how it works. You can then change it to suit your frame needs.

**rajbala** · Nov 2 '06, 11:00 AM

Originally posted by Thevercad

hi,

i'm quite ignorant about the frames. But i have done it using divs.. and i have written down the code below.

the html code :

Code:

<html>
    <head>
    </head>
    <body>
        <img id="Btn1" src="img1.gif" onClick="showImg(this)" />
        <img id="Btn2" src="img2.gif" onClick="showImg(this)" />
        <img id="Btn3" src="img3.gif" onClick="showImg(this)" />
        <div id="Photo1" style="display:none"><img id="img1" src="spacer.gif" ></div>
        <div id="Photo2" style="display:none"><img id="img2" src="spacer.gif" ></div>
        <div id="Photo3" style="display:none"><img id="img3" src="spacer.gif" ></div>
    </body>
</html>

The spacer.gif that i have used above is a transparent gif file, that has 1pixel width and 1pixel height.

The code for the function showImg():

Code:

<script language="javascript">
    var EmptyImg;
    var pointer=0;
    function showImg(imgObj){
        var imgObj1=document.getElementById('img1');
        var imgObj2=document.getElementById('img2');
        var imgObj3=document.getElementById('img3');
        if(EmptyImg==null){
            imgObj1.src=imgObj.src;
            document.getElementById('Photo1').style.display='block';
            EmptyImg = imgObj1.src
        }
        else if(imgObj2.src==EmptyImg){
            imgObj2.src=imgObj.src;
            document.getElementById('Photo2').style.display='block';
        }
        else if(imgObj3.src==EmptyImg){
            imgObj3.src=imgObj.src;
            document.getElementById('Photo3').style.display='block';
        }
        else{
            if(pointer==0){
                imgObj1.src=imgObj.src;
                pointer=1;
            }
            else if(pointer==1){
                imgObj2.src=imgObj.src;
                pointer=2;
            }
            else if(pointer==2){
                imgObj3.src=imgObj.src;
                pointer=0;
            }
        }
    }
</script>

i would first advise you to copy the html code, along with the javascript function, and run it to see how it works. You can then change it to suit your frame needs.

Hai,
Thanks for ur help.We Combined code and run but we cannot get images multile times.The image comes only two times.Please check once and send complete code for getting multile images.

Thank you

**Thevercad** · Nov 2 '06, 11:04 AM

hi,

can you send me the code that you wrote? so that i can get an idea where it is wrong.

thanks.

**rajbala** · Nov 2 '06, 11:59 AM

Originally posted by Thevercad

hi,

can you send me the code that you wrote? so that i can get an idea where it is wrong.

thanks.

<html>
<head>
<script language="javas cript">
var EmptyImg;
var pointer=0;
function showImg(imgObj) {
var imgObj1=documen t.getElementByI d('img1');
var imgObj2=documen t.getElementByI d('img2');
var imgObj3=documen t.getElementByI d('img3');
if(EmptyImg==nu ll){
imgObj1.src=img Obj.src;
document.getEle mentById('Photo 1').style.displ ay='block';
EmptyImg = imgObj1.src
}
else if(imgObj2.src= =EmptyImg){
imgObj2.src=img Obj.src;
document.getEle mentById('Photo 2').style.displ ay='block';
}
else if(imgObj3.src= =EmptyImg){
imgObj3.src=img Obj.src;
document.getEle mentById('Photo 3').style.displ ay='block';
}
else{
if(pointer==0){
imgObj1.src=img Obj.src;
pointer=1;
}
else if(pointer==1){
imgObj2.src=img Obj.src;
pointer=2;
}
else if(pointer==2){
imgObj3.src=img Obj.src;
pointer=0;
}
}
}
</script>
</head>
<body>
<img id="Btn1" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<img id="Btn2" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<img id="Btn3" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<div id="Photo1" style="display: none"><img id="img1" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
<div id="Photo2" style="display: none"><img id="img2" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
<div id="Photo3" style="display: none"><img id="img3" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
</body>
</html>

I tried this code but here i think u forgot mention that id=Photo1 similarly id=Butn1.OK thanks for ur help.

Iam waiting for ur reply.

**Thevercad** · Nov 3 '06, 05:51 AM

Originally posted by rajbala

<html>
<head>
<script language="javas cript">
var EmptyImg;
var pointer=0;
function showImg(imgObj) {
var imgObj1=documen t.getElementByI d('img1');
var imgObj2=documen t.getElementByI d('img2');
var imgObj3=documen t.getElementByI d('img3');
if(EmptyImg==nu ll){
imgObj1.src=img Obj.src;
document.getEle mentById('Photo 1').style.displ ay='block';
EmptyImg = imgObj1.src
}
else if(imgObj2.src= =EmptyImg){
imgObj2.src=img Obj.src;
document.getEle mentById('Photo 2').style.displ ay='block';
}
else if(imgObj3.src= =EmptyImg){
imgObj3.src=img Obj.src;
document.getEle mentById('Photo 3').style.displ ay='block';
}
else{
if(pointer==0){
imgObj1.src=img Obj.src;
pointer=1;
}
else if(pointer==1){
imgObj2.src=img Obj.src;
pointer=2;
}
else if(pointer==2){
imgObj3.src=img Obj.src;
pointer=0;
}
}
}
</script>
</head>
<body>
<img id="Btn1" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<img id="Btn2" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<img id="Btn3" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showIm g(this)" />
<div id="Photo1" style="display: none"><img id="img1" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
<div id="Photo2" style="display: none"><img id="img2" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
<div id="Photo3" style="display: none"><img id="img3" src="/home/sait7/raju/home.asp_files/bottom_data/Form1_data_011/Windows-Manage.gif" ></div>
</body>
</html>

I tried this code but here i think u forgot mention that id=Photo1 similarly id=Butn1.OK thanks for ur help.

Iam waiting for ur reply.

in the above code, you have a statement called

EmptyImg = imgObj1.src;

change it to EmptyImg = imgObj2.src;

i think thats the mistake. sorry i couldnt reply any earlier.

tell me if it works.

**rajbala** · Nov 3 '06, 06:36 AM

HAI,
Thanks for your reply.It works but It is Partial i.e it display only one time if i click another time it wont display.I want to display as many times i click on that image.i.e if i click once it display one image and if i click another time on the same image then the same image must be dislayed again.

Here am sending java applet code for this.I want same work as it is in javascript or
jsp.

package my.contactedito r;
//This is exact
//This program has no RUN time error
//completed this program by saturday..
//The problem we is on the right click.

import java.applet.*;
import java.awt.event. *;
import java.net.Malfor medURLException ;
import java.net.URL;
import java.awt.*;
import java.awt.Image;
import javax.swing.*;
import javax.swing.Ico n;
import javax.swing.Ima geIcon;
import javax.swing.JBu tton;

public class AllEvents extends Applet implements MouseListener, ActionListener
{
int x = 100,y = 100;
Image img,OSC,warnIco n,warnIcon1,war n1;
JButton BS,SS,rt;
Graphics OSG;
// Icon warnIcon;
public void init()
{

setLayout(new GridLayout(0,8) );
setBackground(C olor.cyan );
Panel pan1= new Panel();
pan1.setLayout( new GridLayout( 5, 2, 4, 50));

ImageIcon warnIcon = new ImageIcon("/home/sait7/craft/Antenna/para.jpg");
BS = new JButton(warnIco n);
ImageIcon warnIcon1 = new ImageIcon("/home/sait7/craft/Antenna/Scanner1.gif");
SS = new JButton(warnIco n1);
Button mk = new Button("Link");
ImageIcon warn1 = new ImageIcon("/home/sait7/craft/Mobile phone_files/nokia_3220.jpg" );
rt = new JButton(warn1);
//Button rt = new Button("ROTER") ;
Button gt = new Button("GATWAY" );
pan1.setBackgro und(Color.WHITE );

BS.addActionLis tener(this);

SS.addActionLis tener(this);

mk.addActionLis tener(this);
addMouseListene r(this);
pan1.add(BS);
pan1.add(SS);
pan1.add(mk);
pan1.add(rt);
pan1.add(gt);
add(pan1);

}
/* public void Update()
{
// paint(Graphics g);

}*/
boolean Link = false;

public void actionPerformed (ActionEvent e){
setCursor(new Cursor(Cursor.H AND_CURSOR));
Link = false;
String s = e.getActionComm and();
try
{
if(e.getSource( ) == BS)
img = getImage(new URL("file:///home/sait7/craft/Antenna/para.jpg"));
// img = getImage(new URL("file:///usr/share/pixmaps/applet-critical-blank.png"));
else if(e.getSource( ) == SS)
img = getImage(new URL("file:///home/sait7/craft/Antenna/Scanner1.gif")) ;
else if(s.equals("Li nk"))
{
Link = true;
OSC = createImage(get Size().width,ge tSize().height) ;
OSG = OSC.getGraphics ();
}

}
catch (Exception ex)
{
// ex.printStackTr ace();
System.out.prin t(ex);
}

}

int prevDragX; // During dragging, these record the x and y coordinates of the
int prevDragY; // previous position of the mouse.

public void mouseExited(Mou seEvent e){}
public void mouseEntered(Mo useEvent e){}

public void mousePressed(Mo useEvent e){
/* int modifiers = e.getModifiers( );

if ((modifiers & InputEvent.BUTT ON3_MASK) == InputEvent.BUTT ON3_MASK) {
String s;
s = JOptionPane.sho wInputDialog("R ight Click");
// string res = JOptionPane.sho wInputDialog("h ai");
// System.out.prin tln("Right button pressed.");
}*/

{
if(Link)
{
prevDragX = e.getX();
prevDragY = e.getY();

}
}
}

public void mouseReleased(M ouseEvent e)
{
int modifiers = e.getModifiers( );

if ((modifiers & InputEvent.BUTT ON3_MASK) == InputEvent.BUTT ON3_MASK) {
String s = JOptionPane.sho wInputDialog("R ight Click");

// string res = JOptionPane.sho wInputDialog("h ai");
// System.out.prin tln("Right button pressed.");
}
else{
int x = e.getX();
int y = e.getY();
if(Link){
Graphics g = getGraphics();
g.drawLine(prev DragX,prevDragY ,x,y);
// g.dispose();

}
}
setCursor(new Cursor(Cursor.D EFAULT_CURSOR)) ;

}
public void mouseClicked(Mo useEvent e)
{
x = e.getX();
y = e.getY();
System.out.prin t(x+""+y);
repaint();

}
public void update(Graphics g){
paint(g);
}

public void paint(Graphics g){

//g.drawString("x = "+x+" y = "+y,250,200 );
if(img != null)
g.drawImage(img ,x,y,this);
img =null;

}

}

Try this code and see how it works.Samething i need in javascript or jsp.Please help me urgent.I need this in javascript because i want to access through browser.

Thank you
-raju

**Thevercad** · Nov 3 '06, 07:08 AM

hi,

i went through the code that i had written again. Its working the way you want on my system.

Let me explain to you the code i have written.

i have three image Buttons having id's Btn1, Btn2 and Btn3 and i have three divs having id's Photo1, Photo2 and Photo3. These three div's each contain a transparent gif image with the id's img1, img2 and img3. When i click on anyone of the Image Buttons, the function showImg() fires.

this is what my html code contains.

now over to my script code.

i have a variable called EmptyImg. It contains the src of the transparent gif image. When you load the page in the beginning, it has null value.
So when i click on any button image, for the first time, the EmptyImg variable will be null. So if this variable is null, then it means, i have to fill my first div with the image that i clicked on. i do it with the following statement.

Code:

if(EmptyImg==null){
            imgObj1.src=imgObj.src; // passing the src to first div's image.
            document.getElementById('Photo1').style.display='block';//display div
            EmptyImg = imgObj2.src //assign transparent gif src to EmptyImg.
        }

The second time i click an image button, my EmptyImg variable is not null.
But it has the src of the transparent gif. If my second div also contains the transparent gif, then i need to fill the second div with the image that i clicked on, the second time. i do it with the following code.

Code:

else if(imgObj2.src==EmptyImg){
            imgObj2.src=imgObj.src;// passing src to second div's image.
            document.getElementById('Photo2').style.display='block';//display 2 div
        }

The third time i click on an image button, again i check if the third div's img is a transparent gif, using the EmptyImg variable. If it is, then i assign the third div's image with the src of the button image that i clicked. Here is the code for that.

Code:

else if(imgObj3.src==EmptyImg){
            imgObj3.src=imgObj.src;// passing src to third div's image.
            document.getElementById('Photo3').style.display='block';//display 3 div
        }

Now i have clicked the buttons three times. Now comes the time, when i should replace the first div, if i click on the image button again. For keeping track of this, i've got the Pointer variable. The Pointer variable is assigned the value 0 in the beginning and it retains the value till this time. Once i click on the image button a fourth time, i first check if all the div's are filled. If they are filled, then i check what the pointer variable's value is. If the pointer's value is zero, it implies, the first div should show the image now. After i do that, i change the pointer variable's value to 1, so that the next time i click on an image button, the second div will be replaced. From then on, the pointer variable's value rotates between 0,1 and 2. And this code works, no matter which image button you press and how many ever times continuously.

Again i have something that i noticed in the code that you wrote, based on mine.

Code:

<img id="Btn1" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />
<img id="Btn2" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />
<img id="Btn3" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />

in the above code, all the buttons that you are clicking have the same source. That is you have three same images and not three different images. I have used three different images so that i know which one i clicked and how many times i clicked.

I know i did a lot of explanation. hope you get through to the problem.

**rajbala** · Nov 3 '06, 10:22 AM

Originally posted by Thevercad

hi,

i went through the code that i had written again. Its working the way you want on my system.

Let me explain to you the code i have written.

i have three image Buttons having id's Btn1, Btn2 and Btn3 and i have three divs having id's Photo1, Photo2 and Photo3. These three div's each contain a transparent gif image with the id's img1, img2 and img3. When i click on anyone of the Image Buttons, the function showImg() fires.

this is what my html code contains.

now over to my script code.

i have a variable called EmptyImg. It contains the src of the transparent gif image. When you load the page in the beginning, it has null value.
So when i click on any button image, for the first time, the EmptyImg variable will be null. So if this variable is null, then it means, i have to fill my first div with the image that i clicked on. i do it with the following statement.

Code:

if(EmptyImg==null){
            imgObj1.src=imgObj.src; // passing the src to first div's image.
            document.getElementById('Photo1').style.display='block';//display div
            EmptyImg = imgObj2.src //assign transparent gif src to EmptyImg.
        }

The second time i click an image button, my EmptyImg variable is not null.
But it has the src of the transparent gif. If my second div also contains the transparent gif, then i need to fill the second div with the image that i clicked on, the second time. i do it with the following code.

Code:

else if(imgObj2.src==EmptyImg){
            imgObj2.src=imgObj.src;// passing src to second div's image.
            document.getElementById('Photo2').style.display='block';//display 2 div
        }

The third time i click on an image button, again i check if the third div's img is a transparent gif, using the EmptyImg variable. If it is, then i assign the third div's image with the src of the button image that i clicked. Here is the code for that.

Code:

else if(imgObj3.src==EmptyImg){
            imgObj3.src=imgObj.src;// passing src to third div's image.
            document.getElementById('Photo3').style.display='block';//display 3 div
        }

Now i have clicked the buttons three times. Now comes the time, when i should replace the first div, if i click on the image button again. For keeping track of this, i've got the Pointer variable. The Pointer variable is assigned the value 0 in the beginning and it retains the value till this time. Once i click on the image button a fourth time, i first check if all the div's are filled. If they are filled, then i check what the pointer variable's value is. If the pointer's value is zero, it implies, the first div should show the image now. After i do that, i change the pointer variable's value to 1, so that the next time i click on an image button, the second div will be replaced. From then on, the pointer variable's value rotates between 0,1 and 2. And this code works, no matter which image button you press and how many ever times continuously.

Again i have something that i noticed in the code that you wrote, based on mine.

Code:

<img id="Btn1" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />
<img id="Btn2" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />
<img id="Btn3" src="/home/sait7/raju/home.asp_files/bottom_data/ar_right.gif" onClick="showImg(this)" />

in the above code, all the buttons that you are clicking have the same source. That is you have three same images and not three different images. I have used three different images so that i know which one i clicked and how many times i clicked.

I know i did a lot of explanation. hope you get through to the problem.

Hai,
Thanks for this. Now i need another help if possible try this i want to drag an element from one frame to another frame .i.e good example for this is just like we are adding songs to playlist in mediaplayer. Am sorry to say that ur code is not working in the way what u explained above.Please verify once for my sake. Thanks .Am waiting for ur reply.

How to get images as buttons and display one image for one click

How to get images as buttons and display one image for one click

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment