Solved

toggle 2 images with Javascript

Posted on 2007-11-22
21
2,279 Views
Last Modified: 2008-02-11
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
Comment
Question by:Pigdogmonster
  • 11
  • 8
  • 2
21 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20334888
Yes it does if you put scriptaculous.js in the page too
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20334910
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
 

Author Comment

by:Pigdogmonster
ID: 20334970
hey :)

When I click the + image, it goes blank.

any idea

PDM
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20334985
Code please?
0
 

Author Comment

by:Pigdogmonster
ID: 20335026
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20335124
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
 

Author Comment

by:Pigdogmonster
ID: 20335140
now I get a j/script error: Object required..
0
 
LVL 4

Expert Comment

by:kirankumar_goura
ID: 20338405
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
 

Author Comment

by:Pigdogmonster
ID: 20338509
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20339485
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20339493
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
 

Author Comment

by:Pigdogmonster
ID: 20339516
thats better, any idea on how I can get the image to change to the minus image when it is clicked?
0
 

Author Comment

by:Pigdogmonster
ID: 20339557
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
 

Author Comment

by:Pigdogmonster
ID: 20339568
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20342077
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
 
LVL 4

Expert Comment

by:kirankumar_goura
ID: 20348851
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20348862
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
 

Author Comment

by:Pigdogmonster
ID: 20349011
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20349025
Time to give a url so we can test ourselves
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20349042
I see a typo

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

MUST be

  thisMenuStyle.display=(thisMenuStyle.display == "block")?"none":"block"
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 20349066
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

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…
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…

830 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