Anzeige

Hover-Effekt gesucht (Joomla?)

Hover-Effekt gesucht (Joomla?) | PSD-Tutorials.de

Erstellt von toxictoon, 04.04.2010.

  1. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Hover-Effekt gesucht (Joomla?)
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    Wenn es um den effekt auf den Wabenformen (oranger Rahmen) geht - das ist Flash.
     
    #2      
  3. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    nope, meine das linke menu... diese hover effekt... das dann langsam wieder ausfadet
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    Das ist mit jQuery gemacht.
    jQuery 'kann' von haus aus keine color animationen, deshalb wurde dieses Plugin verwendet: Plugins | jQuery Plugins
     
    #4      
  5. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    hmmm,

    ok danke .. hab folgendes plugin gefunden um jQuery automatisch in Joomla einzubinden...

    jQuery Includer - Joomla! Extensions Directory

    wie kann ich aber nun meine Links formatieren, das diese so aussehen wie bei dem Link?

    hier der Quellcode, den ich von deiner verlinkten Seite habe:

    PHP:
    1.  
    2. /*
    3.  * jQuery Color Animations
    4.  * Copyright 2007 John Resig
    5.  * Released under the MIT and GPL licenses.
    6.  */
    7.  
    8. (function(jQuery){
    9.  
    10.     // We override the animation for all of these color styles
    11.     jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
    12.         jQuery.fx.step[attr] = function(fx){
    13.             if ( fx.state == 0 ) {
    14.                 fx.start = getColor( fx.elem, attr );
    15.                 fx.end = getRGB( fx.end );
    16.             }
    17.  
    18.             fx.elem.style[attr] = "rgb(" + [
    19.                 Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
    20.                 Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
    21.                 Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
    22.             ].join(",") + ")";
    23.         }
    24.     });
    25.  
    26.     // Color Conversion functions from highlightFade
    27.     // By Blair Mitchelmore
    28.     // http://jquery.offput.ca/highlightFade/
    29.  
    30.     // Parse strings looking for color tuples [255,255,255]
    31.     function getRGB(color) {
    32.         var result;
    33.  
    34.         // Check if we're already dealing with an array of colors
    35.         if ( color && color.constructor == Array && color.length == 3 )
    36.             return color;
    37.  
    38.         // Look for rgb(num,num,num)
    39.         if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
    40.             return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
    41.  
    42.         // Look for rgb(num%,num%,num%)
    43.         if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
    44.             return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
    45.  
    46.         // Look for #a0b1c2
    47.         if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
    48.             return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
    49.  
    50.         // Look for #fff
    51.         if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
    52.             return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
    53.  
    54.         // Otherwise, we're most likely dealing with a named color
    55.         return colors[jQuery.trim(color).toLowerCase()];
    56.     }
    57.    
    58.     function getColor(elem, attr) {
    59.         var color;
    60.  
    61.         do {
    62.             color = jQuery.curCSS(elem, attr);
    63.  
    64.             // Keep going until we find an element that has color, or we hit the body
    65.             if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
    66.                 break;
    67.  
    68.             attr = "backgroundColor";
    69.         } while ( elem = elem.parentNode );
    70.  
    71.         return getRGB(color);
    72.     };
    73.    
    74.     // Some named colors to work with
    75.     // From Interface by Stefan Petre
    76.     // http://interface.eyecon.ro/
    77.  
    78.     var colors = {
    79.         aqua:[0,255,255],
    80.         azure:[240,255,255],
    81.         beige:[245,245,220],
    82.         black:[0,0,0],
    83.         blue:[0,0,255],
    84.         brown:[165,42,42],
    85.         cyan:[0,255,255],
    86.         darkblue:[0,0,139],
    87.         darkcyan:[0,139,139],
    88.         darkgrey:[169,169,169],
    89.         darkgreen:[0,100,0],
    90.         darkkhaki:[189,183,107],
    91.         darkmagenta:[139,0,139],
    92.         darkolivegreen:[85,107,47],
    93.         darkorange:[255,140,0],
    94.         darkorchid:[153,50,204],
    95.         darkred:[139,0,0],
    96.         darksalmon:[233,150,122],
    97.         darkviolet:[148,0,211],
    98.         fuchsia:[255,0,255],
    99.         gold:[255,215,0],
    100.         green:[0,128,0],
    101.         indigo:[75,0,130],
    102.         khaki:[240,230,140],
    103.         lightblue:[173,216,230],
    104.         lightcyan:[224,255,255],
    105.         lightgreen:[144,238,144],
    106.         lightgrey:[211,211,211],
    107.         lightpink:[255,182,193],
    108.         lightyellow:[255,255,224],
    109.         lime:[0,255,0],
    110.         magenta:[255,0,255],
    111.         maroon:[128,0,0],
    112.         navy:[0,0,128],
    113.         olive:[128,128,0],
    114.         orange:[255,165,0],
    115.         pink:[255,192,203],
    116.         purple:[128,0,128],
    117.         violet:[128,0,128],
    118.         red:[255,0,0],
    119.         silver:[192,192,192],
    120.         white:[255,255,255],
    121.         yellow:[255,255,0]
    122.     };
    123.    
    124. })(jQuery);
    125.  
    bin leider nicht so bewandert mit javascript... evtl. hilft mir ein kleiner anstoss das ich da durchblicke...
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    Das color.js script musst du auch in deine index.php einbinden. ohne den jQuery includer würde das etwa so aussehen:

    Code (Text):
    1.  
    2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    3. <script type="text/javascript" src="color.js"></script>
    4.  
    dann kannst du deine links zB mit einer mouseover/mousout funktionalität versorgen:
    Code (Text):
    1.  
    2. <script type="text/javascript">
    3.   $(document).ready(function(){
    4.     $("#meineNavi a").mouseover( function(){
    5.       $(this).animate({"color":"orange"},500)
    6.       });
    7.     $("#meineNavi a").mouseout( function(){
    8.       $(this).animate({"color":"white"},500)
    9.       });
    10.   });
    11.  
     
    #6      
  7. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    Hover-Effekt gesucht (Joomla?)
    AW: Hover-Effekt gesucht (Joomla?)

    hi,

    so hatte jetzt endlich mal bischen zeit das zu versuchen.. leider klappt es irgendwie nicht, bin ich zu doof...?

    hab es folgendermaßen eingbunden:

    PHP:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
    4.  
    5. <head>
    6. <jdoc:include type="head" />
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8. <title>test</title>
    9. <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/tpl1/css/template.css">
    10. <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/tpl1/css/navi.css">
    11.  
    12. <script>
    13.   $(document).ready(function(){
    14.     $("#left a").mouseover( function(){
    15.       $(this).animate({"color":"orange"},500)
    16.       });
    17.     $("#left a").mouseout( function(){
    18.       $(this).animate({"color":"white"},500)
    19.       });
    20.   });
    21.  
    22. </script>
    23.  
    24.  
    25. </head>
    26.  
    27.  
    bitte um hilfe :(
     
    #7      
Seobility SEO Tool
x
×
×