?
Solved

toggle 2 images with Javascript

Posted on 2007-11-22
21
Medium Priority
?
2,286 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
[X]
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
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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 200 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: 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.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

752 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