Forums / Cotonti / Skins / User Friendly Links with jQuery

User Friendly Links with jQuery

add your css file

/* to define the general link */
a{
	color:#06F;
	text-decoration:underline;
}

/* General link: hover state to define */
a:hover{
	color:#0CF;
	text-decoration:noner;
}

/* General External Link Class */
a.externalLink {
	background:url(harici.gif) no-repeat right top;
	padding:0 13px 0 0;
}

/* PDF Link Class */
a.pdfLink {
	background:url(pdf.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* Word Link Class */
a.wordLink {
	background:url(word.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* External PDF Link Class */
a.pdfexternalLink {
	background:url(pdfexternal.gif) no-repeat right top;
	padding:0 25px 0 0;
}

open your header.tpl and add to the appropriate place

<script type="text/javascript" src="http://www.kralfutbol.com/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

//DOM Kullanılmak İçin Hazır
$(function() {
	//Select the Related Links
	//We have the appropriate Class Assignment.
	$('a[href^="http"]').addClass('externalLink');
	$('a[href$=".pdf"]').addClass('pdfLink');
	$('a[href$=".doc"]').addClass('wordLink');
	$('a[href$=".pdf"][href^="http"]').addClass('pdfexternalLink');

});
</script>

Demo: http://www.oztecnic.com/wp-content/uploads/2009/03/userfriendlylinks_jquery.html