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? - Page 3

post #21 of 29
Well I'm not sure why you're using images anyways, I mean jQuery gives you tons of control to manage your text, there isn't any benefit to use images to change text.

The reason the scripts weren't working is because the "color: '#D6D6D6'" is only affecting text color, it can't fade color of an image.

"Color" is a css attribute that applies to text color of an element: http://www.w3schools.com/cssref/pr_text_color.asp

This is all you need bud:

http://jsbin.com/oduqep/7/edit

Code here for people who don't like clicking links:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>

        <style type="text/css">
          body {
            padding: 8%;
          }
          a {
            margin: 0px;
            padding: 0px;
            display: block;
            text-decoration: none;
            color: #D6D6D6;
            font-size: 30px;
            font-family: arial;
            font-weight: bold;
            letter-spacing: .06em;
            margin-bottom: -4px;
          }
          
          #a_darrien, #a_resume, #a_local {
            font-size: 12px;
          }
          
          #a_local {
            margin-bottom: 40px;
          }
          
          #a_inspire, #a_folio, #a_about, #a_contact {
            font-size: 80px;
          }
        </style>

      <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">
            var fadeLag = 300;
          
            function init()
            {
                $("div a").hover(function() { // fire this when any anchor tag under a div has mouseover event
                    $(this).animate({color: "#191919"}, fadeLag); // animate to black over 200ms
                }, function() { // fire this when any anchor tag under a div has mouseout event
                    $(this).animate({color: "#D6D6D6"}, fadeLag); // animate to white over 600ms
                });
            }

            $(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 id="a_darrien" href="#">DARRIEN TU</a>
            <a id="a_resume" href="#">RESUME</a>
            <a id="a_local" href="#">LOCATION</a>
            <a id="a_inspire" href="#">INSPIRE</a>
            <a id="a_folio" href="#">PORTFOLIO</a>
            <a id="a_about" href="#">ABOUT ME</a>
            <a id="a_contact" href="#">CONTACT</a>
      </div>
</body>

</html>


Edited by xyexz - 4/6/13 at 4:23pm
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 #22 of 29
Thread Starter 
OHH! You're a scholar and a saint! Thank you so much! The only reason I was using images was because the text because somewhat jaggedy (looks to need antialiasing).
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 #23 of 29
Ok, well images for that reason may help I suppose, in that case I can help you with roll over but it becomes more complex but not too bad, let me know if what I showed above provides better results for you.

You could try using EM for font-size instead of PX, seems like that's made a difference in anti-aliasing bugs before but I can't recall specifically.

The easiest way to fix the jagged look is to apply a background color to all of the div a's like so:
Code:

<style type="text/css">
div a {
    background-color: #FFF; // white
}
</style>


I've updated the jsbin as well with the changes, had to make body and div a's background-color attrib to #FFF as I hadn't set the body bg yet:

http://jsbin.com/oduqep/9/edit
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 #24 of 29
Thread Starter 
Cheers. Unfortunately it still doesn't have the same "crispness" as the images. I've uploaded the rollover images: http://www.4shared.com/rar/zI9MiSno/Rollovers.html just in case you wanted to take a look at them.Here's also the font I was using http://www.4shared.com/zip/JwQ2qRba/webfontkit-20130405-101937.html smile.gif
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 #25 of 29
Alright man, I just found the image links you used in an earlier jsbin wink.gif

This is what you want and best part - I only used the darkest images, you don't need a rollover at all for what you want to do and you don't need the MM_*() function junk, I think that's old Y! js code if I'm not mistaken.

http://jsbin.com/ewoloz/6/edit

Code for lazy people:
Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
  
        <style type="text/css">
          body {
            background-color: #FFF;
          }
          
          a {
            margin: 0px;
            padding: 0px;
            display: block;
            text-decoration: none;
          }
          
          img {
            margin:0;
            padding:0;
            display:block;
            border: 0px;
          }
          
          a img {
            opacity: 0.3; /* pre set opacity */
          }
          
          #a_dar img, #a_about img {
            opacity: 1; /* set opacity for this one to full */
          }
        </style>

        <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">
            var fadeLag = 300;
          
            function init()
            {              
              $("a img").hover(function() {
                $(this).stop();
                $(this).animate({
                  opacity: 1.0
                }, fadeLag);
              }, function() {
                $(this).stop();
                if ($(this).parent().prop("id") != "a_dar" &&
                    $(this).parent().prop("id") != "a_about") { // don't do fade out effort for top link
                  $(this).animate({
                    opacity: 0.3
                  }, fadeLag);
                }
              });
            }

            $(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 id="a_dar" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515cae75e4b069d3c4fd9ab1/1365028469200/dar1.png" width="907" height="99" />
            </a>
            <a id="a_res" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515cc268e4b0daad6e780150/1365033576088/resume2.png" width="907" height="11" />
            </a>
            <a id="a_local" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515cc5d8e4b0ecbdd5a644dd/1365034456875/location2.png" width="907" height="13" />
            </a>
            <a id="a_ins" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515da4c8e4b054dae4003f01/1365091528244/inspire4.png" width="907" height="105" />
            </a>
            <a id="a_folio" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515ca4ece4b0ba196f6148d6/1365026028924/Portfolio2.png" width="907" height="85" />
            </a>
            <a id="a_about" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515da711e4b054dae40046df/1365092113940/aboutme2.png" width="907" height="79" />
            </a>
            <a id="a_contact" href="#">
              <img src="http://static.squarespace.com/static/513fd855e4b040273ace0405/t/515da9a3e4b0ecbdd5a87161/1365092771399/Contact2.png" width="907" height="227" />
            </a>
      </div>
</body>


</html>




You can decide which ones you want to have a "rollover" effect by editing the css and js code slightly - hopefully you can figure out what to add/change in those two sections to disallow rollover effects for certain links.

I also added some css to handle IE's nasty borders on images when nested within an anchor tag.

Enjoy

Edit:
added in $(this).stop() to cancel any other animations as it was looping them on real fast mouse events.
Edited by xyexz - 4/6/13 at 8:31pm
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 #26 of 29
Thread Starter 
THANK YOU SO MUCH! I'm really really appreciative to yours and 3930k's help. biggrin.gif:D
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 #27 of 29
Just wondering, why is the old code still up on the other webpage?

Sorry I couldn't help yesterday, I was busy.
post #28 of 29
Looks like it was reverted back to some old code that doesn't have any of the code we wrote up here, I'd hope the OP uses stuff from here but that's OP's choice 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 #29 of 29
Thread Starter 
Yeap, still playing around with it. Btw does anyone know off a good place to host a single page site?
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?