Improve company productivity with a Business Account.Sign Up

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

toggle 2 images with Javascript

Hi - thanks for looking at my question..

I am looking for a simple script that toggles  between 2 images when clicked.

I found this script online but it does not work..

function trigger_effect(src_element,div_id, effect, first_img, second_img, Effect){
            Effect.toggle(div_id, effect, {afterFinish:function(){
            image = src_element.getElementsByTagName('img')[0];
            image.src = image.src.match(first_img) ? second_img : first_img;
            }});
            return true;
      }

<a href="javascript:;" onclick="trigger_effect(this,'up-down','slide', '/Extracts/images/plus_button.gif', '/Extracts/images/minus_button.gif');">
            <img src="/Extracts/images/plus_button.gif" alt="toggle" />
      </a>
      
      <div id="up-down" style="display: none;">
            <p>'Content'</p>
      </div>
0
Pigdogmonster
Asked:
Pigdogmonster
  • 11
  • 8
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Yes it does if you put scriptaculous.js in the page too
0
 
Michel PlungjanIT ExpertCommented:
But for a simpler one use



function toggle(imgName){
  document.images[imgName].src='/Extracts/images/'+
  ((document.images[imgName].src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}
 
<a href="#" 
onclick="return toggle('plusminus')"><img 
name="plusminus" src="/Extracts/images/plus_button.gif" alt="toggle" /></a>
      

Open in new window

0
 
PigdogmonsterAuthor Commented:
hey :)

When I click the + image, it goes blank.

any idea

PDM
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
Code please?
0
 
PigdogmonsterAuthor Commented:
function toggle(imgName){
  document.images[imgName].src='/Extracts/images/'+
  ((document.images[imgName].src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}


<a href="#" onClick="return toggleMenu('menu1');return toggle('plusminus');"><img border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>


0
 
Michel PlungjanIT ExpertCommented:
You cannot return twice

function toggle(imgName,menuName){
   toggleMenu('menu1');
  document.images[imgName].src='/Extracts/images/'+
  ((document.images[imgName].src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}


<a href="#" onClick="return toggle('plusminus','menu1')"><img border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>
0
 
PigdogmonsterAuthor Commented:
now I get a j/script error: Object required..
0
 
kirankumar_gouraCommented:
try this out ..
function toggle(menuName){
  toggleMenu('menu1');
  var Object = document.getElementById("imgObj");
  Object.src='/Extracts/images/'+ ((Object.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false;
}
<a href="#" onClick="return toggle('menu1')"><img id = "imgObj" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>

Let me know if you need any more help.

-Kiran G
0
 
PigdogmonsterAuthor Commented:
strange, it does not seem to do anything? :)

is it something to do with me calling another j/script function at the same time?

function toggleMenu(currMenu) {
                  if (document.getElementById) {
                        thisMenu = document.getElementById(currMenu).style
                        if (thisMenu.display == "block") {
                              thisMenu.display = "none"
                        }
                        else {
                              thisMenu.display = "block"
                        }
                        return false
                  }
                  else {
                        return true
                  }
            }
            
function toggle(menuName){
  toggleMenu('menu1');
  var Object = document.getElementById("imgObj");
  Object.src='/Extracts/images/'+ ((Object.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false;
}


<a href="#" onClick="return toggle('menu1')"><img id = "imgObj" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>

<SPAN ID="menu1" align="left" CLASS="menu" style="display:none">

CONTENT

</span>
0
 
Michel PlungjanIT ExpertCommented:
Since you are using IDs on the image instead of name, Kiran's code was somewhat better
HOWEVER Object is a reserved word

try this version of mine where I fixed the sending of the menu name and the lack of ID



function toggle(imgID,menuID){
   toggleMenu(menuID);
  var img = document.getElementById(imgID);
  img.src='/Extracts/images/'+
  ((img.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}


<a href="#" onClick="return toggle('plusminus','menu1')"><img id="plusminus" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>




0
 
Michel PlungjanIT ExpertCommented:
and I would code


function toggleMenu(currMenu) {
  if (!document.getElementById) return; // no use to stay
  var thisMenuStyle = document.getElementById(currMenu).style
  thisMenuStyle.display=(thisMenuStyle.display == "block")?"none":"block"
}            
0
 
PigdogmonsterAuthor Commented:
thats better, any idea on how I can get the image to change to the minus image when it is clicked?
0
 
PigdogmonsterAuthor Commented:
its strange, the when I click the plus image , it then goes blank :(
Click again and the plus image returns (basically, the minus image does not show even though it is the correct path)
0
 
PigdogmonsterAuthor Commented:
also noticed that the toggle don't work when I use this code...

function toggle(imgID,menuID){
   toggleMenu(menuID);
  var img = document.getElementById(imgID);
  img.src='/Extracts/images/'+
  ((img.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}

            
function toggleMenu(currMenu) {
  if (!document.getElementById) return; // no use to stay
  var thisMenuStyle = document.getElementById(currMenu).style
  thisMenuStyle=(thisMenuStyle.display == "block")?"none":"block"
}  



<a href="#" onClick="return toggle('plusminus','menu1')"><img id="plusminus" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>

<SPAN ID="menu1" align="left" CLASS="menu" style="display:none">

CONTENT

</SPAN>
0
 
Michel PlungjanIT ExpertCommented:
Do you have more images called plusminus. If you do you need to change some

Like this:



<a href="#" onClick="return toggle('plusminus1','menu1')"><img id="plusminus1" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>
<SPAN ID="menu1" align="left" CLASS="menu" style="display:none">
CONTENT
</SPAN>
<a href="#" onClick="return toggle('plusminus2','menu2')"><img id="plusminus2" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>
<SPAN ID="menu2" align="left" CLASS="menu" style="display:none">
CONTENT
</SPAN>


and is it really spelled minus_button.gif  - js is case sensitive
0
 
kirankumar_gouraCommented:
strange, it does not seem to do anything? :)
is it something to do with me calling another j/script function at the same time?
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
try this out ..
function toggle(menuName){
  toggleMenu(menuName);
  var Object = document.getElementById("imgObj");
  Object.src='/Extracts/images/'+ ((Object.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false;
}
<a href="#" onClick="return toggle('menu1')"><img id = "imgObj" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>

Let me know if you need any more help.

-Kiran G
0
 
Michel PlungjanIT ExpertCommented:
Kiran... What is the difference between my code and yours other than you are using a reserved word (Object) and you do not pass the image to change???

0
 
PigdogmonsterAuthor Commented:
hey gents,
I have checked and the image names are correct:

minus_button.gif
plus_button.gif

I'm afraid I still can't get it working!  The closet I had to working was when I clicked the plus image the image went blank and the content displayed then when clicked again the plus image re-appeared and the content was hidden - which is perfect apart from the minus image not showing.

Sorry for the inconveinience.

PDM
0
 
Michel PlungjanIT ExpertCommented:
Time to give a url so we can test ourselves
0
 
Michel PlungjanIT ExpertCommented:
I see a typo

  thisMenuStyle=(thisMenuStyle.display == "block")?"none":"block"

MUST be

  thisMenuStyle.display=(thisMenuStyle.display == "block")?"none":"block"
0
 
Michel PlungjanIT ExpertCommented:
This has been tested:

<script>
var imgPath = '/Extracts/images/';
function toggle(imgID,menuID){
  toggleMenu(menuID);
  var img = document.getElementById(imgID);
  img.src=imgPath+((img.src.indexOf('plus')==-1)?'plus':'minus')+'_button.gif';
  return false
}
 
            
function toggleMenu(currMenu) {
  if (!document.getElementById) return; // no use to stay
 
  var thisMenuStyle = document.getElementById(currMenu).style
  thisMenuStyle.display=(thisMenuStyle.display == "block")?"none":"block"
}  
 
 
</script>
 
<a href="#" onClick="return toggle('plusminus1','menu1')"><img id="plusminus1" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>
<SPAN ID="menu1" align="left" CLASS="menu" style="display:none">
CONTENT 1
</SPAN>
<a href="#" onClick="return toggle('plusminus2','menu2')"><img id="plusminus2" border="0" src="/Extracts/images/plus_button.gif">&nbsp;Expand</a>
<SPAN ID="menu2" align="left" CLASS="menu" style="display:none">
CONTENT 2
</SPAN>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

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