You 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
<a class="link" href="#">Put Anything Here</a>
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.
Cool. javascript is getting flash ier by the day.
Great! Thanks for sharing.
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
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.
[...] 1. Make Your Links (Hyperlinks) Even More Sexier [...]
I’m getting “window.addEvent” is not a function in Javascript debugger… Would love to get a wordpress plugin to toggle between different effects !
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.
I downloaded the motools .js and linked it in my tag… still not working! As for JQuery, what file do I need to include?
Remove the mootools file and use the Jquery Code (mentioned in above post). Your website http://www.djnightlife.com/ already have Jquery Installed.
Now I’m getting “$ is not a function” from the .js file
where are you implementing it? tell me the URL and let me see.
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(){
Thanks a lot, it’s hot!
You are welcome
How can you add the effect for multiple classes ?
use ‘a.link, a.line’ as the selector. Here link and line are two classes
What if I want to use a sub element, like inside a with class “page_item”, how can I point toward li.page_item a ?
(Also notice it’s only working on the home page for some reasons, if you are in post, the effect is not appearing…)
you have incorrect path to js and css.. make it absolute path as
http://www.djnightlife.com/wp-content/themes/facebook/js/rollover.js
Just noticed it’s not working on IE8, is it just me ?
Nice share. let me try it—though I am not as tech savvy as your other readers here.
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