Changeset 86 in t29-www
- Timestamp:
- Mar 21, 2009, 12:19:25 AM (15 years ago)
- Files:
-
- 3 added
- 4 edited
- 3 moved
Legend:
- Unmodified
- Added
- Removed
-
de/geraete/telefunken_t40w.shtm
r85 r86 2 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 4 <head><!--#set var="title" value="Telefunken T 40W"4 <head><!--#set var="title" value="Telefunken T 40W" 5 5 --><!--#set var="location" value="telefunkent40w" 6 6 --><!--#set var="part" value="extra" 7 7 --><!--#set var="url_en" value="devices/telefunken_t40w.shtm" 8 --><!--#set var="title_en" value="Telefunken T 40W"8 --><!--#set var="title_en" value="Telefunken T 40W" 9 9 --><!--#set var="prev" value="/de/kommunikationstechnik/rundfunk.shtm" 10 10 --><!--#set var="prev_title" value="Rundfunk" … … 26 26 slider[1].max = 100; 27 27 slider[1].val = 0; 28 slider[1].playerStepTimeout = 50; // ms 29 slider[1].playerStepDistance = 0.8; // in min/max/val-Einheiten! 30 slider[1].playerStopLabel = "Animation stoppen"; 31 slider[1].playerStartLabel = "Animation starten"; 32 slider[1].playerRepeatLabel = "Animation wiederholen" 33 slider[1].playerAutoReverse = false; 34 slider[1].playerAutoStart = true; 35 slider[1].playerRepeatFromMin = true; 28 36 slider[1].onchange = setTransparency; 29 37 30 38 function setTransparency(val, blubb) { 31 39 val = val / 100; // normierung auf [0,1] 32 document.getElementById("zu").style.opacity = 1-val; 33 //document.getElementById("offen").style.opacity = val; 40 // bereits ab 0.75 ist der Kasten nicht mehr zu sehen 41 setOpacity("zu", -val/0.75 + 1); 42 // ab 0.75 erscheint die Beschriftung, hoch 3 potenziert 43 setOpacity("beschriftung", Math.pow(val - 0.75, 3)*64 ); 44 // linearer Zuwachs, okay: 45 //setOpacity("beschriftung", (val-0.75)*4 ); 46 //document.getElementById("zu").style.opacity = 1-val; 47 //document.getElementById("beschriftung").style.opacity = val / 2; 48 ////document.getElementById("offen").style.opacity = val; 49 } 50 51 function setOpacity(id, value) { 52 if(value >= 1) value = 1.0; 53 if(value <= 0) value = 0; 54 document.getElementById(id).style.opacity = value; 34 55 } 35 56 </script> … … 41 62 top: 0; left: 0; 42 63 } 43 #rel { position: relative; } 64 #beschriftung { 65 position: absolute; 66 top: -53px; 67 left: -36px; 68 } 69 #zu { z-index: 3 } 70 #beschriftung { z-index: 2; } 71 #offen { z-index: 1; } 72 #rel { position: relative; margin-bottom: 80px; margin-top: 60px; } 44 73 </style> 45 74 </head> … … 51 80 <div class="box center"> 52 81 <div id="rel"> 53 <img id="offen" src="/shared/photos/kommunikationstechnik/telefunken_t40w-offen.jpg" /> 54 <img id="zu" src="/shared/photos/kommunikationstechnik/telefunken_t40w-geschlossen.jpg" /> 82 <img id="offen" src="/shared/photos/kommunikationstechnik/telefunken_t40w/offen.jpg" 83 alt="Telefunken T40W: Sicht auf die Elektronik/das Innenleben" /> 84 <img id="zu" src="/shared/photos/kommunikationstechnik/telefunken_t40w/geschlossen.jpg" 85 alt="Telefunken T40W: Sicht auf das geschlossene Gehäuse" /> 86 <img id="beschriftung" src="/shared/photos/kommunikationstechnik/telefunken_t40w/beschriftung.png" 87 alt="Telefunken T40W Legende: Beschriftung der Verstärkerstufen, Röhren, etc." /> 55 88 </div> 56 <div class="slider" id="slider01"> 57 <div class="left"></div> 58 <div class="right"></div> 59 <img src="/shared/js/slider/img/knob.png" width="31" height="15" /> 60 </div> 89 <div id="controls"> 90 <noscript>Bitte aktivieren sie in ihrem Browser JavaScript, um 91 die Animation betrachten zu können.</noscript> 92 <div class="cols"> 93 <div class="leftcol"> 94 <input type="button" value="Abspielen" id="slider-button1" /> 95 <div class="slider" id="slider01"> 96 <div class="left"></div><div class="right"></div> 97 <img src="/shared/js/slider/img/knob.png" width="31" height="15" /> 98 </div> 99 </div><!--left--> 100 <div class="rightcol"> 101 Benutzen sie den Schieberegler, um einen Einblick in das 102 Gerät erhalten zu können, oder klicken sie auf "Animation 103 starten" 104 </div><!--right--> 105 <div class="clear"></div> 106 </div><!--cols--> 107 </div><!--controls--> 61 108 </div> 62 109 63 <p>Benutzen sie den Schieberegler, um einen Einblick in das 64 Gerät erhalten zu können.</p> 110 <p>Hier steht viel erläuternder Text, der sich möglicherweise noch einiger anderer 111 Bilder bedient, je nach Belieben.</p> 112 65 113 66 114 </div><!-- content --> -
de/kommunikationstechnik/rundfunk.shtm
r85 r86 45 45 </div> 46 46 47 <!-- 48 Dieser Text steht noch nicht offiziell in der Homepage: 47 <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bal und blibliblib bli li asdalsdjalsdjlaskd 48 asd asdkalsdkjalsdjkalsdj alsdk jasldk jasldk al</p> 49 49 50 <div class="box right"> 50 <a href="/de/geraete/telefunken_t40w.shtm"><img src="/shared/photos/kommunikationstechnik/telefunken_t40w -klein.jpg" alt="Fotografie des Telefunken T40W" class="nomargin-bottom" /></a>51 <a href="/de/geraete/telefunken_t40w.shtm"><img src="/shared/photos/kommunikationstechnik/telefunken_t40w/klein.jpg" alt="Fotografie des Telefunken T40W" class="nomargin-bottom" /></a> 51 52 <p class="bildtext">Dies ist ein netter Text zu dem Bild, bei dem sooo viel nette Spielerei passiert. Siehe dazu auch <a href="/de/geraete/telefunken_t40w.shtm" class="go">die Extraseite "Telefunken t40w"</a></p> 52 53 <div class="clear"> </div> 53 54 </div> 54 -->55 55 56 56 <p>Die nächsten Bilder zeigen beispielhaft Geräte, die sich optisch und auch von der Technik her hervorheben. Jedoch ließe sich diese Bildergalerie beliebig weiterführen. -
shared/css/fresh.css
r37 r86 216 216 **/ 217 217 .rundfunk #wrapper, .tontechnik #wrapper, .ultramar #wrapper, .telefunken650 #wrapper, 218 .schaub-lorenz-supraphon #wrapper 218 .schaub-lorenz-supraphon #wrapper, .telefunkent40w #wrapper 219 219 { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); } 220 220 .fernsehen #wrapper, .saba-telerama #wrapper -
shared/js/slider/slider.js
r85 r86 4 4 * This is a lightweight slider implementation originally from 5 5 * http://www.arantius.com/article/lightweight+javascript+slider+control 6 * (2006 Anthony Lieuallen) 6 * (2006 Anthony Lieuallen). 7 * It has been improved a lot to fully implement the requirements of 8 * technikum29. 7 9 * 10 * FEATURES of the slider + player extension: 8 11 * 12 * * basic features: Can be used as simple slider in a user defined 13 * range and with an user defined call back function. 14 * * There can be as much sliders on your page as you want. 15 * * player features: The player imitates some kind of media player 16 * where the slider is the actual position in the played file. 17 * Principally, it's a highly configurable extension that simply 18 * increases/decreases your slider value on a regular basis. 19 * 20 * This script uses advanced DOM technologies like they are typical 21 * for huge javascript libraries like prototype. Anyway, it's very 22 * small for it's features. 23 * 24 * This script is used for the Telefunken T40W page. 25 * 26 * (c) 2009 Sven Koeppel 27 * Released under the public domain. 9 28 */ 10 29 … … 68 87 } 69 88 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ 89 /** 90 * function attachSliderEvents: Called at window onload, parses 91 * DOM tree to get slider widgets and setup events for mouse 92 * capturing. This will also setup the player button/extension. 93 **/ 70 94 function attachSliderEvents() { 71 95 var divs=document.getElementsByTagName('div'); 72 var divNum ;96 var divNum, playerButton; 73 97 for(var i=0; i<divs.length; i++) { 74 98 if (divNum=divs[i].id.match(/\bslider(\d+)\b/)) { 75 // set initial properties76 99 divNum=parseInt(divNum[1]); 77 divs[i].min=slider[divNum].min; 78 divs[i].max=slider[divNum].max; 79 divs[i].val=slider[divNum].val; 80 divs[i].onchange=slider[divNum].onchange; 81 divs[i].num=divNum; 100 // copy initial properties 101 for(var key in slider[divNum]) { 102 divs[i][key] = slider[divNum][key]; 103 } 104 divs[i].num = divNum; 105 82 106 // and make sure the display matches 83 107 drawSliderByVal(divs[i]); 84 108 divs[i].onchange(divs[i].val, divNum); 109 110 if(playerButton=document.getElementById('slider-button'+divNum)) { 111 divs[i].isPlayable = true; 112 // announce them to each other 113 divs[i].playerButton = playerButton; 114 playerButton.slider = divs[i]; 115 // setup button 116 setPlayerLabel(divs[i]); 117 addAnEvent(playerButton, 'click', function(e){ 118 togglePlayer(this.slider); 119 }); 120 // auto start support 121 if(divs[i].playerAutoStart) 122 startPlayer(divs[i]); 123 } else { 124 divs[i].isPlayable = false; 125 } 85 126 86 127 addAnEvent(divs[i], 'mousedown', function(e){ … … 98 139 } 99 140 } 141 142 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ 143 /** 144 * startPlayer(slider): This will start the player extension (moving the 145 * slider automatically). 146 **/ 147 function startPlayer(slider) { 148 if(slider.isPlaying) stopPlayer(slider); 149 if(slider.isPlayerPreparingRepeatFromMin) { 150 // we are now starting from minimum. 151 slider.isPlayerPreparingRepeatFromMin = false; 152 // rewind rapidly back to minimum 153 /*while(slider.val > slider.min) { 154 slider.val -= slider.playerStepDistance * 100; 155 drawSliderByVal(slider); 156 slider.onchange(slider.val, slider.num); 157 }*/ 158 slider.val = slider.min; 159 } 160 slider.isPlaying = true; 161 setPlayerLabel(slider); 162 slider.playerInterval = window.setInterval(function(slider){ 163 slider.val += slider.playerStepDistance; 164 if(slider.val > slider.max) { 165 slider.val = slider.max; 166 if(slider.playerAutoReverse) 167 slider.playerStepDistance *= -1; 168 else 169 stopPlayer(slider); 170 if(slider.playerRepeatFromMin) { 171 slider.isPlayerPreparingRepeatFromMin = true 172 setPlayerLabel(slider); 173 } 174 } else if(slider.val < slider.min) { 175 slider.val = slider.min; 176 if(slider.playerAutoReverse) 177 slider.playerStepDistance *= -1; 178 else 179 stopPlayer(slider); 180 } 181 drawSliderByVal(slider); 182 slider.onchange(slider.val, slider.num); 183 }, slider.playerStepTimeout, slider); 184 } 185 186 /** 187 * stopPlayer(slider): This function does exactly what you think it 188 * will do (see startPlayer). 189 **/ 190 function stopPlayer(slider) { 191 slider.isPlaying = false; 192 setPlayerLabel(slider); 193 window.clearInterval(slider.playerInterval); 194 } 195 196 /** 197 * setPlayerLabel(slider): Set the player button label according to 198 * the current state (whether the slider is currently playing or not) 199 **/ 200 function setPlayerLabel(slider) { 201 if(!slider.isPlayable) return false; 202 if(slider.isPlaying) { 203 slider.playerButton.value = slider.playerStopLabel?slider.playerStopLabel:'|_| Stop'; 204 } else if(slider.isPlayerPreparingRepeatFromMin) { 205 slider.playerButton.value = slider.playerRepeatLabel?slider.playerRepeatLabel:'|<< Repeat'; 206 } else { 207 slider.playerButton.value = slider.playerStartLabel?slider.playerStartLabel:'> Start'; 208 } 209 } 210 211 /** 212 * togglePlayer(slider): Start/Stop the slider player according to 213 * the current state (wheter the slider is currently playing or not) 214 **/ 215 function togglePlayer(slider) { 216 if(slider.isPlaying) { 217 stopPlayer(slider); 218 } else { 219 startPlayer(slider); 220 } 221 } 222 100 223 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ 101 224 //borrowed from prototype: http://prototype.conio.net/
Note: See TracChangeset
for help on using the changeset viewer.