I am using a rollover pure css image sprite on a site.
I was wondering how you would move them around, so you can wrap text around them? Basically treat the sprite like an image.
Thanks
Here is the CSS for the sprite I am using for the sprite:
a.image_sprite:link, a.image_sprite:visited {
display:block;
width:310px;
height:259px;
text-indent:-9999px;
background-image: url(assets/image_one.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
a.image_sprite:hover, a.image_sprite:active {
display:block;
width:310px;
height:259px;
text-indent:-9999px;
background-image: url(assets/image_one.jpg);
background-repeat: no-repeat;
background-position: 0 -259px;
font-family: Arial, Helvetica, sans-serif;
}
Here is the sprite inside the html with text that i want to wrap around it:
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p><p><a href="#" class="image_sprite"></a></p>
<p>Lorem ipsum <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p></div>
