Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

image add, remove using java script

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
hsajid
Asked:
hsajid
  • 5
  • 4
  • 2
1 Solution
 
james_beilbyCommented:
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
 
hsajidAuthor Commented:
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
 
hsajidAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
PureSonaCommented:
can u clarify ur actual problem and what u want to do. Define more clearly.
0
 
james_beilbyCommented:
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
 
hsajidAuthor Commented:
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
 
PureSonaCommented:
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
 
hsajidAuthor Commented:
Thankx puresona.
0
 
james_beilbyCommented:
<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
 
james_beilbyCommented:
urgh, forget that then
0
 
james_beilbyCommented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now