Solved

toggle 2 images with Javascript

Posted on 2007-11-22
21
2,270 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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 …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now