هناك تأثيرات كثيرة بإستخدام الجي كويري وهذه الطريقة مستخدمة بشكل واسع في المواقع الأجنبية والقليل من المواقع العربية
لمشاهدة التنفيذ إضغط هنا

أولا قم بإضافة كود html

[html]

WWW.portal.fwasl.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"><!–mce:0–></script>

<script type="text/javascript"><!–mce:1–></script>
<div id="buttonscontainer">
<ul id="menu">
<li><a href="R"><span> </span></a></li>
<li><a href="F"></a></li>
<li><a href="T"></a></li>
<li><a href="X"></a></li>
</ul>
</div>
[/html]

قم بإضافة كود css

[html] ul#menu li {
float:left;
list-style:none;
}
ul#menu li a {
background:url(‘social.png’) no-repeat scroll top left;
display:block;
height:48px;
position:relative;
}
ul#menu li a.rss {
width:55px;
background:url(‘images/social.png’) no-repeat 0px 0px;
}

ul#menu li a.fb {
width:55px;
background:url(images/social.png) no-repeat -55px 0px;
}

ul#menu li a.tw {
width:55px;
background:url(‘images/social.png’) no-repeat -110px 0px;
}
ul#menu li a.s {
width:55px;
background:url(‘images/social.png’) no-repeat -165px 0px;
}
/*************************************/

ul#menu li a span {
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

/*******************/

ul#menu li a.rss span {
background:url(‘images/social.png’) no-repeat 0px -48px;
}
ul#menu li a.fb span {
background:url(‘images/social.png’) no-repeat -55px -48px;
}
ul#menu li a.tw span {
background:url(‘images/social.png’) no-repeat -110px -48px;
}
ul#menu li a.s span {
background:url(‘images/social.png’) no-repeat -165px -48px;
}
[/html]