Solved

image add, remove using java script

Posted on 2001-08-20
11
253 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Expert Comment

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

Expert Comment

by:james_beilby
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:hsajid
Comment Utility
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
Comment Utility
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
Comment Utility
Thankx puresona.
0
 
LVL 1

Expert Comment

by:james_beilby
Comment Utility
<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
Comment Utility
urgh, forget that then
0
 
LVL 1

Expert Comment

by:james_beilby
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now