Dateigrösse: 4.72 kb
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <title>Fisheye by http://marcgrabanski.com</title> 6 7 <meta charset="utf-8"> 8 9 <style type="text/css"> 10 * { margin:0; padding:0; } 11 html { font-size:11pt; font-family:verdana,sans-serif; } 12 body { background-color:#f5f5f5; padding:120px 50px; } 13 .f_eye { background-color:transparent; border:0pt dotted #aeaeae; display:inline; padding-right:10em; } 14 .ff_eye { background-color:#f5f5f5; border:0pt dashed #aeaeae; display:inline; } 15 .ccc { position:absolute; left:0; top:0; border-bottom:2px solid #aeaeae; width:100%; height:70px; background:url(images/70x1.png); opacity:0.4; } 16 img { background-color:transparent; padding:0; margin:0; } 17 li.fs { margin:0.5em 1em; border:0pt dotted crimson; padding:5px; } 18 li.end { margin-right:10em !important; } 19 .xxl { cursor:pointer; border:1px dotted #aeaeae; } 20 .text { font-size:100%; z-index:10; border-top:3px solid #aeaeae; border-left:3px solid #aeaeae; border-bottom:3px solid #777; border-right:3px solid #777; padding:12pt 20pt; background:#f8f8ff; display:inline; } 21 p.break { clear:left; height:5em; } 22 span.fsize { display:inline-block; margin-right:1em; cursor:pointer; height:15px; width:16px; border:1px dotted #aeaeae; } 23 .plus { background:url(images/icongroesser.jpg) no-repeat; } 24 .minus { background:url(images/iconkleiner.jpg) no-repeat; } 25 .normal { background:url(images/iconnormal.jpg) no-repeat; } 26 </style> 27 28 <link rel="stylesheet" type="text/css" href="fisheye-menu.css"> 29 <script type="text/javascript" src="fisheye_demo.js"></script> 30 31 <script type="text/javascript"> 32 function redirect(i) { 33 var arrUrl = ["../../argonauten.php", "../../ajaxTestFolder", "../../testFolder"]; 34 location.href = arrUrl[i]; 35 } 36 function loader() { 37 fisheyemenu.init(); 38 fisheyemenuXTD.init(); 39 } 40 var font=100; 41 function fontsizer(mode) { 42 var $=document.getElementById("content"); 43 var reset=false; 44 var factor; 45 console.log(mode); 46 if(mode=="normal") { 47 reset=true; 48 } 49 else { 50 factor=(mode=="larger")?(25):(-15); 51 font=font+factor; 52 if(font>300 || font<25) { 53 reset=true; 54 } 55 } 56 /* 57 if(reset==true) { 58 font=100; 59 $.innerHTML ="Textgrösse im DIV#content"; 60 $.innerHTML +="<li class='fs'>fontSize: "+font+"%</li>"; 61 } else { 62 $.innerHTML +="<li class='fs'>fontSize: "+font+"%</li>"; 63 } 64 */ 65 font=reset?100:font; 66 $.innerHTML="Textgrösse im DIV#content@fontSize: "+font+"%"; 67 $.style.fontSize=font+"%"; 68 } 69 70 window.onload=loader 71 72 </script> 73 </head> 74 75 76 <body> 77 78 <div class="ccc"> </div> 79 80 <div class="f_eye"> 81 <ul id="fisheye_menu"> 82 <li><img src="images/b_drop.png" width="16" height="16" alt="" /><img src="images/b_drop_32px.png" width="32" height="32" alt="" /><span>delete</span></li> 83 <li><img src="images/gear_pencil_16px.png" width="16" height="16" alt="" /><img src="images/gear_pencil_32px.png" width="32" height="32" alt="" /><span>editieren</span></li> 84 <li onclick="window.print(document);"><img src="images/b_print.png" width="16" height="16" alt="" /><img src="images/b_print_32px.png" width="32" height="32" alt="" /><span>drucken</span></li> 85 <li><img src="images/bb_edit.png" width="16" height="16" alt="" /><img src="images/bb_edit_32px.png" width="32" height="32" alt="" /><span>bearbeiten</span></li> 86 <li><img src="images/bbb_edit.png" width="16" height="16" alt="" /><img src="images/bbb_edit_32px.png" width="32" height="32" alt="" /><span>edit</span></li> 87 <li><img src="images/edit__16px.png" width="16" height="16" alt="" /><img src="images/edit__32px.png" width="32" height="32" alt="" /><span class="xl">administration</span></li> 88 <li class="end"><img src="images/edit_16px.png" width="16" height="16" alt="" /><img src="images/edit_32px.png" width="32" height="32" alt="" /><span class="xl">toolbox</span></li> 89 </ul> 90 91 <ul id="ffisheye_menu"> 92 <li><img src="images/folder_music_32px.png" /><img src="images/folder_music_256.png" onclick="redirect(0)" class="xxl" /><span class="xl two">music folder</span></li> 93 <li><img src="images/puzzle_32px.png" /><img src="images/puzzle_256px.png" onclick="redirect(1)" class="xxl" /><span class="xl two">puzzle blue</span></li> 94 <li class="end"><img src="images/gear_red_32px.png" /><img src="images/gear_red_256px.png" onclick="redirect(2)" class="xxl" /><span class="xl two">tool gear red</span></li> 95 </ul> 96 </div> 97 98 <div style="margin-top: -10pt;"> 99 <span class="fsize plus" title="" onclick="fontsizer('larger');"> </span> 100 <span class="fsize normal" title="" onclick="fontsizer('normal');"> </span> 101 <span class="fsize minus" title="" onclick="fontsizer('smaller');"> </span> 102 </div> 103 104 <p class="break"> </p> 105 106 <div class="text" id="content"> 107 Textgrösse im DIV#content@fontSize: 100% 108 </div> 109 110 <!-- 111 --> 112 </body> 113 </html> 114