Soannalkjek
New Member
CSS file:-\[code\] <style type="text/css">.sprite div{width: 728px; height: 243px; } .sprite a:hover{ display: block; width: 728px; height: 243px; background-image: url(images/image.jpg); background-repeat: no-repeat; } .sp_ID1 { background-position: 0px 0px; } .sp_ID2 { background-position: 0px -245px; } .sp_ID3 { background-position: 0px -492px; } .sp_ID4 { background-position: 0px -737px; } .sp_ID5 { background-position: 0px -1000px; } .sp_ID6 { background-position: 0px -200px; } </style\[/code\]HTML :-\[code\]<div class="sprite>" <span class="sprite sp_ID1"><a href=http://stackoverflow.com/questions/3896612/#>Link1</a></span> <br /><br /> <span class="sprite sp_ID2"><a href=http://stackoverflow.com/questions/3896612/#>Link2</a></span> <br /> <br /> <span class="sprite sp_ID3"> <a href=http://stackoverflow.com/questions/3896612/#>Link3</a></span> <br /><br /> <span class="sprite sp_ID4"> <a href=http://stackoverflow.com/questions/3896612/#>Link4</a></span> <br /><br /> <span class="sprite sp_ID5"> <a href=http://stackoverflow.com/questions/3896612/#>Link5</a></span> <br /></div>\[/code\]The parts of images of this CSS sprite are appearing only as the background of the anchor tags..I want the parts of this CSS sprite to appear as the bground of the div..basically trying to implement rollover images using Sprites..What I want is something like this .....Grey colored image to appear in the background when mouse is hovered over "Link1", Green colored image to appear when mouse is hovered over "Link2" and so on...plz someone tell me what am I doing wrong ? Been trying to make it work since yesterday but in vain...plz help..Thanks.