SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image sprite IN a li

    So, I have an inline list that I'm working with. My problem is that I want to use an image in the list and change the image when it is hovered over. I thought that I could do a sprite for this, but damn I can't @$#^^$ get it to work.

    So, I'm wondering if I should be doing a sprite here or an image rollover???


    HTML code


    <div id="MainNavigation">

    <ul id="MainNav">

    <li> <a href="#">About us</a></li>
    <li> <a href="#">Classes</a></li>
    <li> <a href="#">Personal Training</a></li>
    <li> <a href="#">Events</a></li>
    <li> <a href="#">Calendar</a></li>
    <li> <a href="#">Contact us</a> </li>

    <li> <a href="#"><img src="IMAGES/Mixed_Martial_arts.png" width="220" height="85" alt="Mixed Martial Arts" /></a></li>

    <li> <a href="#"><img src="IMAGES/TRX_training.png" width="92" height="65" alt="Mixed Martial Arts" /></a></li>



    <li> <a class="SpinClass" href="#"><img src="IMAGES/SPIN_CLASSES.png" width="92" height="65" alt="Spin class" /></a>
    </li>



    </ul>


    </div> <!--MainNavigation-->



    CSS



    #MainNav li a img.SpinClass:hover {
    background-image:url(IMAGES/TRX_training.png);


    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,596
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Check out this linkl for a possibility:

    http://www.websitecodetutorials.com/...ss-sprites.php

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this solved it

    HTML
    <li> <a class="SpinClass" href="#">Spin Class</a></li>

    CSS

    .SpinClass {
    display:inline-block;
    margin-top:-50px;
    width: 101px;
    height: 70px;
    background:url(IMAGES/SPIN_CLASSES.png) 0 0;
    text-indent: -99999px;
    }

    .SpinClass:hover {
    background-position: -100px 0px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •