SandboxJavaScriptToggleImagesPeterZumbruch < Homepages

You are here: Hades Wiki>Homepages Web>HomepagePeterZumbruch>SandboxJavaScriptToggleImagesPeterZumbruch (04 Aug 2006, PeterZumbruch) (raw view)EditAttach

<!--
   By default, this topic can be changed/renamed by the original author, only.
   Set ALLOWTOPICCHANGE = %MAINWEB%.PeterZumbruch
   Set ALLOWTOPICRENAME = %MAINWEB%.PeterZumbruch
-->
---+ Toggle Images 

   * [[%ATTACHURL%/onclickZoomImage.js][onclickZoomImage.js]]: <nop>JavaScript</nop> for this functionality
<!--  * [[%ATTACHURL%/onclickZoomImage.html][onclickZoomImage.html]]: example code -->

<script type="text/javascript" src="http://www-hades.gsi.de/tools/js/onclickZoomImage.js"></script>

This <nop>JavaScript</nop>-function (by Simon Lang) enables you to switch between 2 different sizes of a picture , toggled by a click:

Code:
<pre style="margin-left:1cm">
<verbatim>
<script type="text/javascript" src="http://www-hades.gsi.de/tools/js/onclickZoomImage.js"></script>
<img src="http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/N_ep_em_gen4_ABC.gif"
width='500px' height="200px" onclick="zoomToggle('200px','200px','500px','500px',this);">
</verbatim> 
</pre>
The syntax is 
<pre style="margin-left:1cm">
<verbatim>
     <img src="A" onclick="zoomToggle('iWideSmall','iHighSmall','iWideLarge','iHighSmall',this);">
</verbatim>
</pre>

---
%N% & %U%<br>
Instead of using an external adress outside the Wiki Simon suggests to use the [[TWiki.IncludeTopicsAndWebPages][%<nop>INCLUDE{...}%]] feature by 
putting the <nop>JavaScript</nop> Code into an own page an reference this via [[TWiki.IncludeTopicsAndWebPages][%<nop>INCLUDE{...}%]]

Following this idea JavaScriptToggleImagesPeterZumbruch contains now the code fragment which is now included via [[TWiki.IncludeTopicsAndWebPages][%<nop>INCLUDE{...}%]] .
Using this method you will find in this new topic SandboxJavaScriptToggleImagesViaIncludePeterZumbruch.

Click on the picture below and enjoy!

-
<img src="http://hades-wiki.gsi.de/pub/SimAna/PairsNov02/N_ep_em_gen4_ABC.gif" width='175px' height="118px" onclick="zoomToggle('174px','118px','696px','470px',this);">


-- Main.PeterZumbruch - 02 Mar 2006

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
js	onclickZoomImage.js	manage	0.4 K	01 Mar 2006 - 18:03	PeterZumbruch	JavaScript source for zoomToogle

Topic revision: r3 - 04 Aug 2006, PeterZumbruch

Homepages

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Hades Wiki? Send feedback
Imprint (in German)
Privacy Policy (in German)