Switch Images

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.


NEW & UPDATED
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

I AttachmentSorted ascending Action Size Date Who Comment
onclickSwitchImage.htmlhtml onclickSwitchImage.html manage 425 bytes 2006-01-19 - 15:07 PeterZumbruch example code
onclickSwitchImage.jsjs onclickSwitchImage.js manage 2 K 2006-01-19 - 15:05 PeterZumbruch <nop>JavaScript for this functionality
Topic revision: r8 - 2006-08-04, PeterZumbruch
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki Send feedback | Imprint | Privacy Policy (in German)