Question

I have a CSS for my ZoomHandlers as shown

.zoomHandle {
width: 10px;
height: 55px;
}

Please see the Image of the Zoomhandlers on the chart here
http://www.tiikoni.com/tis/view/?id=74ce68f

What i want to have is that , Left and Right Arrow marks on the Left and Right Zoom handlers on it , as shown here

http://www.tiikoni.com/tis/view/?id=bab7819

I have tried adding background-image:(“Test.png”); , but it did not got shown

Any ideas ??

Answer 1

Here is the solution.
Css Sprites

You ask How?In the tutorial you see how you can display a part of a large image that you tell it zoom

<ul id="container">
<li id="image"></li>
</ul>

<style type="text/css">
#container{
position:relative;
width:400px;
height:200px;
background-image:url("background.jpg");
overflow:hidden;
}

#image{ 
position:relative;
width:1024px;
height:200px;
left:-100;
}
</style>

and you can have two button and with jquery increase or decrease left position of #image