Switch Images

• onclickSwitchImage.js: JavaScript for this functionality
• onclickSwitchImage.html: example code

This JavaScript-function enables you to provide up to 9 pictures in one, toggled by a click:

Code:

<script type="text/javascript" src="http://www-hades.gsi.de/tools/js/onclickSwitchImage.js"></script>
<img     src="http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/N_ep_em_gen4_ABC.gif" 
     onclick="switchToggle(this,
                          'http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/N_ep_em_gen4_ABC.gif', 
                          'http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/background_ABC.gif', 
                          'http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/gen4_ABC.gif');">

The syntax is

     <img src="A" onclick="switchToggle(this,'A','B','C');">

Up to 9 sources can be used.

---

&
Instead of using an external adress outside the Wiki Simon suggests to use the %INCLUDE{...}% feature by putting the JavaScript Code into an own page an reference this via %INCLUDE{...}%

Following this idea JavaScriptToggleImagesPeterZumbruch contains now the code fragment which is now included via %INCLUDE{...}% . Using this method you will find in this new topic SandboxJavaScriptSwitchImagesViaIncludePeterZumbruch.

---

Click on the picture below and enjoy!

Extensions

• Preview of all available Pictures on one side of the original pictures, aktive highlighted, click on previews aktivates corresponding picture.

-- PeterZumbruch - 02 Mar 2006