I have one giant image with 3 areas specific for links, I don't want the
whole image just 3 specific areas of the giant image, when I read up on
sprites most of the examples were little buttons so how do I go about
doing it this way which I have laid out ?
Christopher
Alan K Baker wrote:
> No, not necessarily. It depends on how many different blocks of three images
> you need to use.
>
> This method uses a single combined 3 image block for a vertical menu and
> works cross-browser:
> You'd need to set inline params for a horizontal menu.
> It doesn't cater for sub-items, but once you have mastered this, it's a
> fairly easy progression.
>
> HTML:
> <div id="menu">
> <ul>
> <li><a href="item1.html">Item1</a></li>
> <li><a href="item2.html">Item2</a></li>
> <!-- and as many more or less <li> items as you need -->
> </ul>
> </div>
> ---------------------------------------------------------------------------------------------
>
> CSS
> #menu {
> /* Create box/position for menu with a background image if required */
> }
>
> #menu ul {
> /* Set position and padding/margins of <ul> within menu box */
> }
>
> #menu li { /* Remove <li> defaults */
> list-style:none;
> }
>
> #menu li a {
> background-image:url(3 part single image url goes here);
> background-repeat: no-repeat;
> background-position:0 0;
> /* Set width, height etc */
> }
>
> #menu li a:hover {
> background-position:0 -73px; /* Change position to suit image sizes */
> }
>
> #menu li a:active {
> background-position:0 -146px; /* Change position to suit image sizes */
> }
>
> ---------------------------------------------------------------------------------------------
>
> Just add appropriate sizes and positions to suit your images, and remove
> anchor default coloring as necessary.
>
> Regards,
>
> Alan.
>
> www.theatreorgans.co.uk
> www.virtualtheatreorgans.com
> Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> Shopsmith 520 + bits
> Flatulus Antiquitus
>
>
> ----- Original Message -----
> From: Christopher
> To: css-d@lists.css-discuss.org
> Sent: Saturday, June 21, 2008 1:49 AM
> Subject: Re: [css-d] CSS Roll Over Problem Help
>
>
> So I have one <div> now with just a background image. I have to create
> three other <divs> ? And each one
> being a :hover and a :active?
>
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
