Solved

image add, remove using java script

Posted on 2001-08-20
11
255 Views
Last Modified: 2008-03-17
Hi,

     Using javascript i want to add & remove Images. Like if click on Start Image then start image remove and add Stop Image vice versa.
0
Comment
Question by:hsajid
  • 5
  • 4
  • 2
11 Comments
 
LVL 1

Expert Comment

by:james_beilby
ID: 6405703
To replace images you can use the [image object].src property. For instance, to replace the Start Image with a Stop Image:
document.imgObj.src = "stopimage.gif";
and back again:
document.imgObj.src = "startimage.gif";

If instead you want to show one image and hide the other one, set the [image object].style.visibility property to "visible" or "hidden":

<html>
<head>
<script language="javascript">
<!--
function switchImgs(imgA,imgB){
  if(imgA.style.visibility=="visible"){
    imgA.style.visibility="hidden";
    imgB.style.visibility="visible";
  }else{
    imgA.style.visibility="visible";
    imgB.style.visibility="hidden";
  }
}
//-->
</script>
</head>
<body>
<img name="img1" style="visibility:'visible';" src="start.gif">
<img name="img2" style="visibility:'hidden';" src="stop.gif">
<input type="button" value="Switch Images" onClick="switchImgs(document.img1,document.img2)">
</body>
</html>

Hope this helps,
James
0
 

Author Comment

by:hsajid
ID: 6406014
Thanx for good comments. Actually by implementing this am facing another issue. I explain what i want to do, i think will be usefull to answer.
i h've four buttons. so by enabling & disabling these. it produces  gap between buttons because some are enable & some r disable that looks bad. so some more suggestion.
0
 

Author Comment

by:hsajid
ID: 6406074
Thanx for good comments. Actually by implementing this am facing another issue. I explain what i want to do, i think will be usefull to answer.
i h've four buttons. so by enabling & disabling these. it produces  gap between buttons because some are enable & some r disable that looks bad. so some more suggestion.
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Expert Comment

by:PureSona
ID: 6406282
can u clarify ur actual problem and what u want to do. Define more clearly.
0
 
LVL 1

Expert Comment

by:james_beilby
ID: 6406319
There are two potential ways of doing this:

- by capturing the value and onClick properties of each enabled button and moving it into the left-most button elements, then hiding the disabled buttons on the end. But I'm having problems getting the onClick property at the moment, so perhaps not.

- Dynamically rewriting the HTML of a layer so that it only contains the enabled buttons. But again the OnClick property will have to be specified in the code as it can't be captured from existing button objects.
0
 

Author Comment

by:hsajid
ID: 6406320
ok
i h've four buttons. Start, Stop, Parallel, nonParallel. there r four cases that i want to consider.
1) At First  start button visible
     stop button visible=false
     parallel button visible=true
     nonparallel button visible=false
2)when click stop button
     only start button should be visible
3) when parallel button is clicked
      visible nonparallel & stop
4) when nonparallel is clicked
       parallel & stop is visible
0
 

Accepted Solution

by:
PureSona earned 60 total points
ID: 6406348
Try this, I think it will help u.
<script language="JavaScript">
<!--
var btnStart=1
var btnParallel=1

function switchImgsStart()
{
     if (btnStart==1)
     {
          btnStart=0
          document.btnStart.src='btn-stop.gif'
          document.btnParallel.style.visibility="visible";
     }
     else if (btnStart==0)
     {
          btnStart=1
          document.btnStart.src='btn-start.gif'
          document.btnParallel.style.visibility="hidden";
     }
     
}

function switchImgsParallel()
{
     if (btnParallel==1)
     {
          btnParallel=0
          document.btnParallel.src='btn-nonparallel.gif'
     }    
     else if (btnParallel==0)
     {
          btnParallel=1
          document.btnParallel.src='btn-parallel.gif'
     }    
}

//-->
</script>

In Html section type this
<img src="btn-start.gif" name="btnStart" border="0" onclick="switchImgsStart()">
              <img style="visibility:'hidden';" src="btn-parallel.gif" name="btnParallel" onclick="switchImgsParallel()">

0
 

Author Comment

by:hsajid
ID: 6406372
Thankx puresona.
0
 
LVL 1

Expert Comment

by:james_beilby
ID: 6406392
<html>
<head>
<script language="javascript">
<!--
buttons = new Array();
buttons[0] = new Button("Start","setEnabled(1);alert('start');",true);
buttons[1] = new Button("Stop","setEnabled(0);alert('stop');",false);
buttons[2] = new Button("Parallel","setEnabled(1,3);alert('parallel clicked');",true);
buttons[3] = new Button("Non-parallel","setEnabled(1,2);alert('non-parallel clicked');",false);

function Button(val,click,defEnabled){
  this.value = val;          // Value displayed on the button
  this.onClick = click;          // OnClick event handler code
  this.enabled = defEnabled;     // Button is visible when the page is first loaded
}

function updateButtons(){
  var outHTML="";
  for(var n=0;n<buttons.length;n++){
    if(buttons[n].enabled)
      outHTML += "<input type=\"button\" value=\""+buttons[n].value+"\" onClick=\""+buttons[n].onClick+"\">";
  }
  if(navigator.appName=="Netscape"){
    document.buttonLyr.document.open();
    document.buttonLyr.document.write("<form>"+outHTML+"</form>");
    document.buttonLyr.document.close();
  }else
    buttonDiv.innerHTML = outHTML;
}

function setEnabled(){
  for(var a=0;a<buttons.length;a++){
    buttons[a].enabled=false
    for(var b=0;b<setEnabled.arguments.length;b++){
      if(setEnabled.arguments[b]==a)
        buttons[a].enabled=true;
    }
  }
  updateButtons();
}

function disableButton(buttonNo){
  buttons[buttonNo].enabled = false;
  updateButtons();
}

function enableButton(buttonNo){
  buttons[buttonNo].enabled = true;
  updateButtons();
}
//-->
</script>
</head>
<body onLoad="updateButtons();">
<form name="frm">
<div id="buttonDiv">
<layer name="buttonLyr">
</layer>
</div>
</form>
</body>
</html>

Explanation coming up in a minute...
0
 
LVL 1

Expert Comment

by:james_beilby
ID: 6406396
urgh, forget that then
0
 
LVL 1

Expert Comment

by:james_beilby
ID: 6406409
If you just wanted to use images (think i misinterpreted the word "button" to actually mean a Button) then it would have been simple to adjust the original code I provided that used [image object].style.visibility
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question