{"id":132,"date":"2015-09-14T14:45:08","date_gmt":"2015-09-14T12:45:08","guid":{"rendered":"https:\/\/wiki.ad-libitum.info\/?page_id=132"},"modified":"2015-09-14T15:34:15","modified_gmt":"2015-09-14T13:34:15","slug":"vordergrund-aus-und-einschalten","status":"publish","type":"page","link":"https:\/\/wiki.ad-libitum.info\/?page_id=132","title":{"rendered":"Vordergrund aus- und einschalten"},"content":{"rendered":"

Auf der Seite folgenden Code ganz am Anfang einbinden:
\n<div id=\"ausblender\">
\n<img name=\"ein_aus\" title=\"zum Aus- und Einschalten des Vordergrunds\" src=\"files\/laden_im_thal\/grafiken\/baum_klein.jpg\" alt=\"\" onclick=\"verblassen('wrapper', 2000);\"><\/code>
\n
\n<script type=\"text\/javascript\">
\ndocument.getElementById(\"wrapper\").style.opacity = \"0\";
\ndocument.getElementById(\"wrapper\").style.filter = \"alpha(opacity = 0)\";
\nsetTimeout (\"einblenden();\", 2000);<\/code>
\n
\nfunction einblenden() {
\nverblassen(\"wrapper\", 2000);
\n}<\/code>
\n
\n<\/script>
\n<\/div>
\n<\/code>
\nDas <div id=\"wrapper\"><\/code> ist dann das erste Tag, das nach <body><\/code> kommen muss.<\/p>\n

Der Code f\u00fcr das aus- und einblenden ist wie folgt:
\n<\/code><\/p>\n

\/\/Idee: http:\/\/tech.pro\/tutorial\/725\/javascript-tutorial-simple-fade-animation\r\n\/\/var TimeToFade = 2000.0;\r\n\r\nfunction animateFade(lastTick, eid, dauer)\r\n{  \r\n  var curTick = new Date().getTime();\r\n  var elapsedTicks = curTick - lastTick;\r\n  \r\n  var element = document.getElementById(eid);\r\n \r\n  if(element.FadeTimeLeft <= elapsedTicks)\r\n  {\r\n    element.style.opacity = element.FadeState == 1 ? '1' : '0';\r\n    element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';\r\n    element.FadeState = element.FadeState == 1 ? 2 : -2;\r\n    return;\r\n  }\r\n \r\n  element.FadeTimeLeft -= elapsedTicks;\r\n  var newOpVal = element.FadeTimeLeft\/dauer;\r\n  if(element.FadeState == 1)\r\n    newOpVal = 1 - newOpVal;\r\n\r\n  element.style.opacity = newOpVal;\r\n  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';\r\n  \r\n    setTimeout(function(){animateFade(curTick,eid,dauer)}, 33);\r\n}\r\n\r\n\r\nfunction verblassen(eid, dauer)\r\n{\r\n\r\n  var element = document.getElementById(eid);\r\n \r\n   if(element.FadeState == 2)\r\n      document.images.ein_aus.src = \"files\/laden_im_thal\/bilder\/baum_klein_hover.jpg\";\r\n  else\r\n      document.images.ein_aus.src = \"files\/laden_im_thal\/bilder\/baum_klein.jpg\";\r\n\r\n  if(element.FadeState == null)\r\n  {\r\n    if(element.style.opacity == null || element.style.opacity == '' \r\n       || element.style.opacity == '1') \r\n      element.FadeState = 2;\r\n    else \r\n      element.FadeState = -2;\r\n  }\r\n    \r\n  if(element.FadeState == 1 || element.FadeState == -1)\r\n  {\r\n    element.FadeState = element.FadeState == 1 ? -1 : 1;\r\n    element.FadeTimeLeft = dauer - element.FadeTimeLeft;\r\n  }\r\n  else\r\n  {\r\n    element.FadeState = element.FadeState == 2 ? -1 : 1;\r\n    element.FadeTimeLeft = dauer;\r\n    setTimeout(animateFade(new Date().getTime(),eid, dauer), 33);\r\n  } \r\n}\r\n\r\n\r\n$(document).ready(function(){\r\n    $(\"#fadeButton\").click(function(){\r\n        fade('fadeBlock');\r\n    });\r\n});<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Auf der Seite folgenden Code ganz am Anfang einbinden: <div id=“ausblender“> <img name=“ein_aus“ title=“zum Aus- und Einschalten des Vordergrunds“ src=“files\/laden_im_thal\/grafiken\/baum_klein.jpg“ alt=““ onclick=“verblassen(‚wrapper‘, 2000);“> <script type=“text\/javascript“> document.getElementById(„wrapper“).style.opacity = „0“; document.getElementById(„wrapper“).style.filter = „alpha(opacity = 0)“; setTimeout („einblenden();“, 2000); function einblenden() { verblassen(„wrapper“, 2000); } <\/script> <\/div> Das <div id=“wrapper“> ist dann das erste Tag, das nach <body> […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-132","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=132"}],"version-history":[{"count":0,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/132\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}