hover table using css sprites

Hi friends, in this post I am sharing how to create hover table using css sprites.I have already discussed about advantages using css sprites.

ADVANTAGES OF USING CSS SPRITES Loads images fast due multiple images are used as single image thus increasing  webpage load faster. 1.USE CSS SPRITES IN BLOGGER 2.USE CSS SPRITES IN BLOGGER WITH OPACITY EFFECT

• A sample image given below.Use this image or create image of actual size below.Upload the image in blogger and Copy the “copy link address” .And replace #.png with your copy link address.

 

• Now copy and paste the below code in blogger post or page or in HTML/Javascript.

<style> #nav{position:relative;} #nav li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #nav li, #nav a{height:230px;display:block;} #h{left:0px;width:180px;} #h{background:url('#.png') 0px 0px;} #h a:hover{background: url('#.png')0px 250px;} #r{left:180px;width:180px;} #r{background:url(‘#.png') -180px 0;} #r a:hover{background: url(‘#.png')-180px 250px;} #m{left:360px;width:180px;} #m{background:url(‘#.png’)-360px 0;} #m a:hover{background: url(‘#.png')-360px 250px;} </style> <ul id="nav"> <li id="h"><a href="#"></a></li>   <li id="r"><a href="#”></a></li>   <li id="m"><a href="#”></a></li> </ul>

If you can’t get correct just change width ,left,padding,margin.Definitely it will work.Replace hash with your links.Add some <br/> at the end of code in order to avoid collapsing with other widgets.See just below my post you can see the table with hover effect was used in my blog.

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•