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

Topic attachments
I Attachment Action Size Date Who Comment
onclickSwitchImage.htmlhtml onclickSwitchImage.html manage 0.4 K 2006-01-19 - 14:07 PeterZumbruch example code
onclickSwitchImage.jsjs onclickSwitchImage.js manage 2.3 K 2006-01-19 - 14:05 PeterZumbruch JavaScript for this functionality
Topic revision: r8 - 2006-08-04, PeterZumbruch
 
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding GSI Wiki? Send feedback
Imprint (in German)
Privacy Policy (in German)