Make Your Links (Hyperlinks) Even More Sexier

HyperLinkYou would have often seen various attempts to make hyperlink more beautiful. One of my personal favorite is to have little icons beside links to let you know where they link to.
Different icons for external links, pdfs, images, etc. etc. You can find the tutorial for such link over here.

In this post i’ll tell you a technique using which you can make your links even more sexier.

Check out the demo first : View Demo

The Implementation of this effect is given in the following sections.

The HTML

Put Anything Here

All you need is to add classname “link” to your hyperlinks.

The CSS

The only important class is to have the final class “a.link”.

a:link,a:hover,a:active,a:visited{
	color:#59BAEF;
	text-decoration:none;
	white-space:nowrap;
}
a{
	outline:none;
}
a.link{
	background:transparent url(a-bg.png) no-repeat -81px bottom;
}

The Javascript : Mootools

window.addEvent('domready',function(){
	$$('a.link').each(function(a){
		a.setStyle('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
		a.set('tween',{duration:600});
		a.addEvents({
			'mouseenter' : function(){
				a.tween('backgroundPosition', a.getSize().x + "px "+ (a.getSize().y-2) +"px");
			},
			'mouseleave' : function(){
				a.tween('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
			}
		})
	})
})

The Javascript : jQuery

$(document).ready(function(){
    $('a.link').css('backgroundPosition', "-81px "+ ($(this).outerHeight()-2) +"px");
    $('a.link').bind('mouseenter',function(e){
        var a = $(this);
        a.animate({'backgroundPosition': a.outerWidth() + "px "+ (a.outerHeight()-2) +"px"},600);
    });
    $('a.link').bind('mouseleave',function(e){
        var a = $(this)
        a.animate({'backgroundPosition': "-81px "+ (a.outerHeight()-2) +"px"},600);
    });
})

Image Used

This effect is just a demo of the possibilities. I would love to here your own implementations.

28 Responses

  1. tasser #

    Cool. javascript is getting flash ier by the day.

    Reply
  2. Praveen #

    First of all thanks for sharing your experience.
    I tried with your code but my DOM element is not getting ready.
    I am sure my js file is calling (as i checked with my other function).

    Thanks

    Reply
    • nitin #

      I am sure you must have enough trying before posting comment, so i would request to upload your sample code somewhere so that i can dig into it and help you further.

      Reply
  3. DJ NightLife #

    I’m getting “window.addEvent” is not a function in Javascript debugger… Would love to get a wordpress plugin to toggle between different effects !

    Reply
    • nitin #

      The error caused to you is because, you don’t have mootools installed.

      Anyways I have updated the post with a Jquery Version, just use this version.

      Reply
  4. DJ NightLife #

    I downloaded the motools .js and linked it in my tag… still not working! As for JQuery, what file do I need to include?

    Reply
  5. DJ NightLife #

    Now I’m getting “$ is not a function” from the .js file :(

    Reply
    • nitin #

      where are you implementing it? tell me the URL and let me see.

      Reply
    • nitin #

      Your jquery is running in no-conflict mode. Hence you’ll have to make few more changes in your rollover.js.

      Just replace $ with jQuery from whole file.

      for instance 1st line will become
      jQuery(document).ready(function(){
      in place of, $(document).ready(function(){

      Reply
    • nitin #

      use ‘a.link, a.line’ as the selector. Here link and line are two classes

      Reply
  6. DJ NightLife #

    (Also notice it’s only working on the home page for some reasons, if you are in post, the effect is not appearing…)

    Reply
  7. DJ NightLife #

    Just noticed it’s not working on IE8, is it just me ?

    Reply
  8. Howtoblogformoney #

    Nice share. let me try it—though I am not as tech savvy as your other readers here.

    Reply
  9. sebestiraj #

    its very nice and i like it so much. but i can’t Understand it can u mail the explanations for this sexier link creation and thumb nail link creation

    Reply
  10. kodama #

    it not working with jquery-1.4.4.min.js ?
    it is possible?

    Reply
  11. William #

    CAN’T SEEM TO GET THIS TO WORK. DOES THE LINK HELP OR DO YOU NEED MORE?

    Reply
  12. antonio #

    I downloaded jquery and nothing does not work ….
    Mottols deleted the part, is why?
    Would you please set an example to download?

    Reply
  13. Stelios #

    Hey

    this was pretty nice but it seems that it does not work with query.
    At least not with the way you have it set up.
    If you happen to know how to fix it then ill use that one instead :)

    mootools seems to be working perfectly.

    Thanx, nice work !

    Reply

Leave a Reply