Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

image add, remove using java script

Posted on 2001-08-20
11
256 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

856 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