Forum

Fade Link funktioniert nicht!

Erstellt von JannisL, 12.03.2011.



  1. JannisL

    JannisL Der mit dem Doppel-N ;)

    12
    Dabei seit:
    15.08.2010
    Beiträge:
    1.091
    Geschlecht:
    männlich
    Software:
    Photoshop CS5 Ext.,
    Kameratyp:
    Spiegelreflex
    Fade Link funktioniert nicht!
    Links mit Hover Effekt (weich)!

    Ich habe ein kleines Problem, und zwar:
    Ich will ein Menü mit hover-Effekten haben, das aber smooth ist. Also habe ich mir ein fade-script geholt. Nur der funktioniert leider nicht:
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    3.  
    4.     <title>Digital Imaging</title>
    5.  
    6.     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    7.     <meta name="description" content="" />
    8.     <meta name="author" content="" />
    9.     <meta name="keywords" content="" />
    10.     <meta name="generator" content="" />
    11.  
    12.     <link href="style.css" type="text/css" rel="stylesheet" />
    13.    <script language="Javascript" src="js/fade.js"></script>
    14.  
    15.  
    16. </head>
    17.  
    18.  <div id="menu">
    19.   <ul>
    20.    <li><a href="#" class="fade">Home</a></li>
    21.    <li><a href="#">About Me</a></li>
    22.    <li><a href="#">Digital Imaging</a></li>
    23.    <li><a href="#">Impressum</a></li>
    24.   </ul>
    25.  </div>
    26.  
    27.  <div id="images">
    28.  
    29.   </div>
    30. </body>
    31. </html>
    Code (Text):
    1. html, body
    2. {
    3.  background-color: #191919;
    4.  margin: 0;
    5.  font-family: Verdana;
    6. }
    7. #menu {
    8.  width: 300px;
    9.  height: 500px;
    10.  background-color: #191919;
    11.  position: relative;
    12.  margin-top: 10%;
    13.  margin-left: 2%;
    14.  float: left;
    15. }
    16. #menu li{
    17.     padding-top: 75px;
    18.     padding-left: 25px;
    19.     list-style: none;
    20. }
    21. #menu a {
    22.     color: #808080;
    23. }
    24. #menu a:hover {
    25.     color: #C4C4C4;
    26. }
    27. .hover {
    28.     color: #C4C4C4;
    29. }
    30.  
    31.  
    javascript:
    Code (Text):
    1. /*****************************************\
    2. ||       Fade Script Version 3.1         ||
    3. ||   http://anarchos.xs.mw/fade.phtml    ||
    4. ||            (c) July 2001              ||
    5. || _____________________________________ ||
    6. || Created by:                           ||
    7. || Anarchos    > anarchos.xs.mw          ||
    8. || _____________________________________ ||
    9. || auto-startColor by Mike West          ||
    10. || mike@westman.org                      ||
    11. || _____________________________________ ||
    12. || uniqueID upgrade by DubMatrix         ||
    13. || http://www.princefari.com             ||
    14. || _____________________________________ ||
    15. || Color conversion from decimal to      ||
    16. || hex (dehexize function) by:           ||
    17. || Litejet > litejet@hotmail.com         ||
    18. || _____________________________________ ||
    19. || Fade, hex, setColor functions by:     ||
    20. || Dak Phoenix > phoenix-archetypes.com  ||
    21. || _____________________________________ ||
    22. || domouseover/out based on scripts by   ||
    23. || The Shadow  > www.icon.co.za/~andrewk ||
    24. ||                                       ||
    25. \*****************************************/
    26.  
    27. /*************
    28. **** <config>
    29. **/
    30.  
    31. fadeColor = "#C4C4C4";  // color to fade to
    32. //fadeColor = "#0";
    33. stepIn = 17; // delay when fading in
    34. stepOut = 25; // delay when fading out
    35.  
    36. /* set to true or false; true will
    37. ** cause all links to fade automatically
    38. ** (you won't need to add class="fade")
    39. ***/
    40. autoFade = false;
    41.  
    42. /* set to true or false; true will cause all CSS
    43. ** classes with "fade" in them to fade onmouseover
    44. ***/
    45. sloppyClass = true;
    46.  
    47. /* set to true or false; true will make the script
    48. ** work for Macs (IE 5+), but you will have to give
    49. ** a name (name="blah") to each link that you want
    50. ** to fade.
    51. ***/
    52. macCompat = false;
    53.  
    54. /**
    55. **** </config>
    56. **************/
    57.  
    58. /*************
    59. **** <install>
    60. **
    61.  
    62. Now, once you have customized your fading colors,
    63. you need to include your customized .js file on
    64. every page that you want to use it in. You can
    65. include javascript files using this syntax (in
    66. the head of a document):
    67.  
    68. <script src="fade.js" language="Javascript"></script>
    69.  
    70. Now that you have the file included, you need to
    71. setup your links a small bit.  Each link that you
    72. want to fade needs to use the fade class.
    73.  
    74. Example:
    75.  
    76. <a href="blah.html" class="fade">click here</a>
    77.  
    78. Also, the link must be plain text.  This means
    79. that you can't have <b>'s, <i>'s, <font>'s, etc.
    80. inside of the link.
    81.  
    82. Example of what not to do:
    83.  
    84. <a href="blah.html" class="fade"><b>click</b> here</a>
    85.  
    86. Have fun!
    87. -Anarchos-
    88.  
    89. **
    90. **** </install>
    91. **************/
    92.  
    93. hexa = new makearray(16);
    94. for(var i = 0; i < 10; i++)
    95.     hexa[i] = i;
    96. hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
    97. hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
    98.  
    99. document.onmouseover = domouseover;
    100. document.onmouseout = domouseout;
    101.  
    102. fadeColor = dehexize(fadeColor.toLowerCase());
    103.  
    104. var fadeId = new Array();
    105.  
    106. function dehexize(Color){
    107.     var colorArr = new makearray(3);
    108.     for (i=1; i<7; i++){
    109.         for (j=0; j<16; j++){
    110.             if (Color.charAt(i) == hexa[j]){
    111.                 if (i%2 !=0)
    112.                     colorArr[Math.floor((i-1)/2)]=eval(j)*16;
    113.                 else
    114.                     colorArr[Math.floor((i-1)/2)]+=eval(j);
    115.             }
    116.         }
    117.     }
    118.     return colorArr;
    119. }
    120.  
    121. function domouseover() {
    122.     if(document.all){
    123.         var srcElement = event.srcElement;
    124.         if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
    125.                 if (!srcElement.startColor) {
    126.                     srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
    127.                     srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
    128.                 }
    129.                 var link = (macCompat? srcElement.name: srcElement.uniqueID);
    130.                 if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
    131.                 else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
    132.         }
    133.     }
    134. }
    135.  
    136. function domouseout() {
    137.     if (document.all){
    138.         var srcElement = event.srcElement;
    139.         if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
    140.             var link = (macCompat? srcElement.name: srcElement.uniqueID);
    141.             if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
    142.         }
    143.     }
    144. }
    145.  
    146. function makearray(n) {
    147.     this.length = n;
    148.     for(var i = 1; i <= n; i++)
    149.         this[i] = 0;
    150.     return this;
    151. }
    152.  
    153. function hex(i) {
    154.     if (i < 0)
    155.         return "00";
    156.     else if (i > 255)
    157.         return "ff";
    158.     else
    159.        return "" + hexa[Math.floor(i/16)] + hexa[i%16];
    160. }
    161.  
    162. function setColor(r, g, b, element) {
    163.       var hr = hex(r); var hg = hex(g); var hb = hex(b);
    164.       element.style.color = "#"+hr+hg+hb;
    165. }
    166.  
    167. function fade(s,e,element,step) {
    168.     var sr = s[0]; var sg = s[1]; var sb = s[2];
    169.     var er = e[0]; var eg = e[1]; var eb = e[2];
    170.  
    171.     if (fadeId[0] != null && fade[0] != element && eval(fadeId[0])) {
    172.         var orig = eval(fadeId[0]);
    173.         setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
    174.         var i = 1;
    175.         while(i < fadeId.length) {
    176.             clearTimeout(fadeId[i]);
    177.             i++;
    178.         }
    179.     }
    180.  
    181.     for(var i = 0; i <= step; i++) {
    182.         fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
    183.             step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
    184.             ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
    185.     }
    186.     fadeId[0] = element;
    187. }
    188.  
    189.  
    190.  
    Ich habe vorher noch nie was mit Javascript gemacht, aber irgendwie will ich jetzt auch mal damit anfangen(aber nur vorgefertigte Scripts :D).
    Wieso klappt das nicht??? Ich habe doch dem Link die Klasse Fade gegeben. Hoffe auf Hilfe!!!
     
    Zuletzt bearbeitet: 13.03.2011
    #1      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×