Hai all,
I need to get two or three images as a buttons.At the moment when i click the image it must display on window if i click another image button that image also display on the same window but previous one should not replace by current one.
For example,
I have three image buttons img1,img2,img3.At the moment i click on the img1 it should dislplay the image on window.Similarly if click on the img2 it also display on the same window without replacement of img1 i,e img1 and img2 both are should be there only.
10  3129 
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?
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
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 : - <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(): - <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.
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 :
- <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():
- <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
hi,
can you send me the code that you wrote? so that i can get an idea where it is wrong.
thanks.
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="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='b lock';
EmptyImg = imgObj1.src
}
else if(imgObj2.src==EmptyImg){
imgObj2.src=imgObj.src;
document.getElementById('Photo2').style.display='b lock';
}
else if(imgObj3.src==EmptyImg){
imgObj3.src=imgObj.src;
document.getElementById('Photo3').style.display='b lock';
}
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>
</head>
<body>
<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)" />
<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.
<html>
<head>
<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='b lock';
EmptyImg = imgObj1.src
}
else if(imgObj2.src==EmptyImg){
imgObj2.src=imgObj.src;
document.getElementById('Photo2').style.display='b lock';
}
else if(imgObj3.src==EmptyImg){
imgObj3.src=imgObj.src;
document.getElementById('Photo3').style.display='b lock';
}
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>
</head>
<body>
<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)" />
<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.
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.contacteditor;
//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.MalformedURLException;
import java.net.URL;
import java.awt.*;
import java.awt.Image;
import javax.swing.*;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
public class AllEvents extends Applet implements MouseListener, ActionListener
{
int x = 100,y = 100;
Image img,OSC,warnIcon,warnIcon1,warn1;
JButton BS,SS,rt;
Graphics OSG;
// Icon warnIcon;
public void init()
{
setLayout(new GridLayout(0,8));
setBackground(Color.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(warnIcon);
ImageIcon warnIcon1 = new ImageIcon("/home/sait7/craft/Antenna/Scanner1.gif");
SS = new JButton(warnIcon1);
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.setBackground(Color.WHITE);
BS.addActionListener(this);
SS.addActionListener(this);
mk.addActionListener(this);
addMouseListener(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.HAND_CURSOR));
Link = false;
String s = e.getActionCommand();
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("Link"))
{
Link = true;
OSC = createImage(getSize().width,getSize().height);
OSG = OSC.getGraphics();
}
}
catch (Exception ex)
{
// ex.printStackTrace();
System.out.print(ex);
}
}
int prevDragX; // During dragging, these record the x and y coordinates of the
int prevDragY; // previous position of the mouse.
public void mouseExited(MouseEvent e){}
public void mouseEntered(MouseEvent e){}
public void mousePressed(MouseEvent e){
/* int modifiers = e.getModifiers();
if ((modifiers & InputEvent.BUTTON3_MASK) == InputEvent.BUTTON3_MASK) {
String s;
s = JOptionPane.showInputDialog("Right Click");
// string res = JOptionPane.showInputDialog("hai");
// System.out.println("Right button pressed.");
}*/
{
if(Link)
{
prevDragX = e.getX();
prevDragY = e.getY();
}
}
}
public void mouseReleased(MouseEvent e)
{
int modifiers = e.getModifiers();
if ((modifiers & InputEvent.BUTTON3_MASK) == InputEvent.BUTTON3_MASK) {
String s = JOptionPane.showInputDialog("Right Click");
// string res = JOptionPane.showInputDialog("hai");
// System.out.println("Right button pressed.");
}
else{
int x = e.getX();
int y = e.getY();
if(Link){
Graphics g = getGraphics();
g.drawLine(prevDragX,prevDragY,x,y);
// g.dispose();
}
}
setCursor(new Cursor(Cursor.DEFAULT_CURSOR));
}
public void mouseClicked(MouseEvent e)
{
x = e.getX();
y = e.getY();
System.out.print(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
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. - 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. - 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. - 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. - <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.
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.
- 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.
- 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.
- 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.
- <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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Ken Fine |
last post by:
I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio button
associated with each layout icon. On click of one of...
|
by: abcd |
last post by:
Very basic HTML question
1. I have image I want to display that to a button how can I do that. I
want to fire the on click event too
2. if 1 is not possible then how can I set image to have...
|
by: Jim |
last post by:
I know this is a little off-topic for C#, but I'm writing
my user controls with C#, and the other more HTML-related
groups looked like there hasn't been activity in days for
some reason......
|
by: mrajanikrishna |
last post by:
Hello friends,
I have developed an application using ASP.NET and SQL Server.
Ours is a garment factory. I need to design another module in my
application.
I want to generate images on fly...
|
by: Cerebral Believer |
last post by:
Hi folks,
I am using the following code for mouse over (roll-overs) in my XHTML code.
<a onmouseover="document.getElementById('sitemap').src =
'../images/buttons/sitemap_mo.jpg';"...
|
by: JoJo |
last post by:
I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at: http://jojowebdesign.com/dom1.html
My question is...
|
by: tesa |
last post by:
Thanks for the help early this morning!
The one problem I can not figure out still is how to swap the images.
I have the images in an array.
is the image to start with.... then as the player...
|
by: Revathi Balakrishnan |
last post by:
Hi
i have the used the below code to switch the button image on mouseover
and mouseout.
<html:button property="Button" value="Display" styleClass="displaybutton" ...
|
by: matheussousuke |
last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails.
The goal is: Make it send the email with the URL...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| |
