Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make interactive logos?
New Posts  All Forums:Forum Nav:

How to make interactive logos?

post #1 of 29
Thread Starter 
I'd like to have something like this: http://robtreutel.com/ where you can cover of a word and it fills with colour. Is there an easy way to do this like maybe using a theme or something? I know absolutely no coding!

Warm regards,

Darrien
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #2 of 29
Looks like he is using jQuery to get that effect. Look in the head of the document and you'll see linkFader.js and that is the code that gives the link that effect.
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
post #3 of 29
Thread Starter 
Quote:
Originally Posted by the_dude View Post

Looks like he is using jQuery to get that effect. Look in the head of the document and you'll see linkFader.js and that is the code that gives the link that effect.

Hmm. Went to the jQuery site and after 15 mins of reading the coding and stuff my brain just shut off. tongue.gif I have no idea what is going on there. Maybe I should just hire somebody to do this for me..
Edited by Dar_T - 4/2/13 at 8:00pm
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #4 of 29
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
post #5 of 29
Thread Starter 
Quote:
Originally Posted by tom.slick View Post

It is really easy to use
http://www.position-absolute.com/articles/hover-image-link-fader-with-jquery/

Thanks for the link but I'm still not understanding how to do it. Do I just paste the master css into the ? I can't open or drag the .js files anywhere. Also where is the tag? I can't seem to find it. Kind of wish there was a vid or image tutorial.
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #6 of 29
OK, let's take a small website.
Code:
<!doctype html>
<html>
<head>
    <title>TheWebsite</title>
</head>
<body>
    <h1 id="a">AAAAAAAAAAAAAAAAAA</h1> 
    <h1 id="b">BBBBBBBBBBBBBBBBBBB</h1>
</body>
</html>
Now, to do that effect, first add IDs to make it jQuery selectable (I'll get onto that soon):
Code:
<!doctype html>
<html>
<head>
    <title>TheWebsite</title>
</head>
<body>
    <h1 id="a">AAAAAAAAAAAAAAAAAA</h1> 
    <h1 id="b">BBBBBBBBBBBBBBBBBBB</h1>
</body>
</html>
Install jQuery, a very powerful javascript library.
Code:
<!doctype html>
<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title>TheWebsite</title>
</head>
<body>
    <h1 id="a">AAAAAAAAAAAAAAAAAA</h1> 
    <h1 id="b">BBBBBBBBBBBBBBBBBBB</h1>
</body>
</html>
Now, write some javascript. (I'll comment it, don't worry)
Code:
<!doctype html>
<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title>TheWebsite</title>
</head>
<body>
    <h1 id="a">AAAAAAAAAAAAAAAAAA</h1> 
    <h1 id="b">BBBBBBBBBBBBBBBBBBB</h1>
    <script>
    var a = $('h1#a'); //take the jQuery obejct for the h1 with the id of a. You can do lots with jQuery objects.
    var b = $('h1#b'); //take the jQuery obejct for the h1 with the id of b.
    a.css('opacity', 0.5); //tells jQuery to set the opacity of h1 with id a to have an opacity of 50%.
    b.css('opacity', 0.5); //same deal with b.
    a.hover(function(){ a.animate({'opacity': 1}, 400); /*basically tells jQuery to, over the course of 400 milliseconds, increase the value of a's opacity up to 100%.*/  }, function(){ a.animate({'opacity': 0.5}, 400); /*the same, but back down to 50%.*/  });
    b.hover(function(){ b.animate({'opacity': 1}, 400); /*same as above, with b.*/  }, function(){ b.animate({'opacity': 0.5}, 400); /*same as above, with b.*/ }); //same as a, just that this time with b.
    </script>
</body>
</html>
Tell me if you need any more help smile.gif
post #7 of 29
You don't need id's to make elements on the page jQuery selectable if you do something like the following:
Code:
<!doctype html>
<html>
    <head>
        <title>Site</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script type="text/javascript">
            function init() {
                $("div a").mouseover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#000"}, 500); // animate to black over 500ms
                });

                $("div a").mouseout(function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#FFF"}, 500); // animate to white over 500ms
                });
            }

            $(document).ready(init); // call init once the document has been loaded in the browser, that way you know elements have loaded before trying to access
        </script>
    </head>
    <body>
        <div>
            <a href="link1.htm">Home</a>
            <a href="link2.htm">Contact</a>
        </div>
    </body>
</html>

Edited by xyexz - 4/3/13 at 8:51pm
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
post #8 of 29
Quote:
Originally Posted by xyexz View Post

You don't need id's to make elements on the page jQuery selectable if you do something like the following:
Code:
<!doctype html>
<html>
    <head>
        <title>Site</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script type="text/javascript">
            function init() {
                $("div a").mouseover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#000"}, 500); // animate to black over 500ms
                });

                $("div a").mouseout(function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#FFF"}, 500); // animate to white over 500ms
                });
            }

            $(document).ready(init); // call init once the document has been loaded in the browser, that way you know elements have loaded before trying to access
        </script>
    </head>
    <body>
        <div>
            <a href="link1.htm">Home</a>
            <a href="link2.htm">Contact</a>
        </div>
    </body>
</html>
That is another way of doing it, true. Especially handy if you want to put the effect on hundreds of links lol.
post #9 of 29
Yeah most of the stuff I work on is quite large so I try to think in those terms, also I find the method I used somewhat easier to maintain/read which is something I always strive to do biggrin.gif

Either solution, OP, would work - you still around? biggrin.gif
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
AMD Rig
(12 items)
 
  
CPUMotherboardGraphicsGraphics
8320 FX Gigabyte 990FX-UD3 XFX R9 270X XFX R9 270X 
RAMHard DriveOptical DriveCooling
Crucial Ballistix Sport Kingston V300 Bluray Cooler Master Seidon 240M 
OSKeyboardPowerCase
Windows 7 x64 Ultimate CM QuickFire Corsair CX750M Corsair 540 Air 
  hide details  
Reply
post #10 of 29
Thread Starter 
Thanks for the reply. Here's what I got so far.http://jsbin.com/afihuj/1/edit I don't know how to target the jQuery command to the image rollovers.
Edited by Dar_T - 4/4/13 at 11:54am
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to make interactive logos?