Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onclick image swap

Status
Not open for further replies.
moleboy

moleboy

IS-IT--Management
Oct 10, 2002
33
GB
Hi,

Im try to create a cascade of information using plus and minus images.

intImage = 2;

function swapImage(name, src) {

switch (intImage) {
case 1:
document.images[name].src = "images/plus.gif"
intImage = 2
return(false);
case 2:
document.images[name].src = "images/minus.gif"
intImage = 2
return(false);
}
}

The function on called from this code with the id and name for each heading. onclick i display or hide additional info

<img id="IMG1" name="IMG1" src="images/plus.gif" onClick="swapImage(name, src);"> text here
<img id="IMG2" name="IMG2" src="images/plus.gif" onClick="swapImage(name, src);"> text here


This works apart from when i click another image the image sometimes does not change depending on what image was clicked before. How can i get each plus/minus to function separately??
 
Sort by date Sort by votes
Under case 2, make intImage = 2 into intImage = 1.

If I understand what you're doing, you should be changing the value of intImage or else case 2 will always fire.

If that doesn't do it, then add break; as the last statement in each case. This shouldn't matter since the return statements should ensure departure from the function, but...

'hope that helps.

--Dave
 
Upvote 0 Downvote
Thanks Dave but the first part u mentioned was a typ o. Is is set to one in the code. I've tried break; but to no good.


To expain further , I click on the first image, text is visable, and image changes to minus.gif. If I click again on the same image(its minus now), text hidden, and image changes to plus.gif.
But if I click the first image then click next image (trying to display text for both) , the image doesnt change, but the text is visable.

any other ideas?
 
Upvote 0 Downvote
Can you post more code (including the text-hiding stuff)?

While you're at it, try changing swapImage(name, src) (everywhere it is in the code) to swapImage(this.name, this.src).

--Dave
 
Upvote 0 Downvote
Here you go.

<html>
<head>
<script type="text/javascript">
<!--
function toggle(theDiv){
var el = document.getElementById(theDiv);
el.style.display = (el.style.display == "none")?"":"none";
//-->
}
intImage = 2;

function swapImage(name, src) {

switch (intImage) {
case 1:
document.images[name].src = "images/plus.gif"
alert (name)
intImage = 2
return(false);
break;
case 2:
document.images[name].src = "images/minus.gif"
alert (name)
intImage = 1
return(false);
break;
}
}

</script>
<script language="JavaScript" src="assess.js">
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="assess.css" type="text/css">
</head>
<body text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="form1" method="post" action="response.asp" onSubmit="return validate();">
<!--TAB BODY START-->
<div id="tabCtrl" >
<div id="tabBodCrit" style="display:;">
<blockquote>
<blockquote><img id="IMG1" name="IMG1" src="images/plus.gif" border="0" onClick="toggle('div1'); swapImage(name, src);"><span class="gText">
Q1</span></blockquote>
</blockquote>
<table style="display:none;" id="div1" width="496">
<tr>
<td height="30" colspan="2" class="qText">
<div align="right"> checks identity : </div>
</td>
<td height="30" width="80">
<div align="center">
<select name="cboDP1" id="cboDP1" onChange="cboBkgdChange(this)">
<option value="0" selected> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
<td height="94" rowspan="2" width="5">
<div align="center"></div>
<div align="center"></div>
</td>
</tr>
<tr id="dp2" >
<td height="30" colspan="2" class="qText">
<div align="right"> disclose sensitive information : </div>
</td>
<td height="30" width="80" bordercolor="#0066cc">
<div align="center">
<select name="cboDP2" onChange="cboBkgdChange(this)">
<option value="0" selected> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
</table>
<blockquote>
<blockquote>
<div align="left">
<p><b> <img id="IMG2" name="IMG2" src="images/plus.gif" border="0" onClick="toggle('dd'); swapImage(name, src);"><span class="gText">
Q2 </span></b></p>
</div>
</blockquote>
</blockquote>
<table id=dd style="display:none;" width="502" >
<tr id="dd1" >
<td valign="top" height="30" class="qText" width="399">
<div align="right">DD guarantee and confirms understanding : </div>
</td>
<td height="30" width="51">
<div align="center">
<select name="cboDD1" id="cboDD1" onChange="cboBkgdChange(this)">
<option value="0" selected> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
<td height="30">
<div align="center"></div>
</td>
</tr>
</table>
</div>
<div id="tabBodFE" style="display:none;">
<!--TAB BODY END-->
</div>
</div>
</form>
</body>
</html>
 
Upvote 0 Downvote
Ah.

The problem is that there is only one intImage variable and clicking on one image changes the value of it. You need a strategy for keeping that straight. Perhaps, instead of intImage, you use intImageArray and send another parameter to the swapImage(...) function. That parameter will be the index in intImageArray which will need changing. The switch will then be on intImageArray[index] instead if intImage.

'hope that helps.

--Dave
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
106
feherke
feherke
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
221
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
100
gmmastros
gmmastros
JRB-Bldr
  • Locked
  • Question
innerHTML onclick() functionality
Replies
2
Views
114
JRB-Bldr
JRB-Bldr
LyndonOHRC
  • Locked
  • Question
Single quote is breaking my onclick action 1
Replies
4
Views
115
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top