SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :hover change image?

    Hi,

    Is it possible to make a link, change its image on :hover?

    Or can it only be done with javascript?

    If it can be done, how? I seem to be having trouble.

    Thanks

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    CSS can't change values of attributes on images.
    If your image is in fact a background image - this can be controlled via CSS.

    If your images are inline, javascript is what should be used for rollover effects.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a {
      background-image: url(image1.jpg);
    }
    
    a:hover {
      background-image: url(image2.jpg);
    }

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i was trying that, except it didnt seem to work properly Centurai

    Is it possible to have just an image link, using CSS's background property instead of an image in the HTML?

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, and that should be the normal way to do it, as images are presentation. Just set the <a> element to display:block and set the width and height to match the image. If you need to set links side by side, then use float:left instead of block display (floating converts it to block display). The <a> needs to be block display as you cannot set heights and widths on inline elements.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Yes, and that should be the normal way to do it, as images are presentation.
    Not necessarily, images can also be used to convey meaning or used for functionality so an alternative must also be provided in these case either through the use of alt text or image replacement to ensure that users without CSS or images are still able to use or understand the site.

    It sounds like this is for navigation and therefore I would suggest using a background image but I'd also suggest doing it using the image replacement technique which I've posted in another thread.

    http://www.sitepoint.com/article/hea...ages-css-xhtml

    This way, you ensure that you're not relying on CSS or images for functionality that should be present through HTML alone.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the image is important to content (such as a navigation) the you can have it in the html and then on rollover just hide the image and let the background show through which already holds the rollover state. This method actually produces the only method of avoiding the IE dreaded hourglass flicker.

    I have examples here:

  8. #8
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Code:
    a {
      background-image: url(image1.jpg);
    }
    
    a:hover {
      background-image: url(image2.jpg);
    }
    A better way of doing this would be to do:-

    Code:
    a {
      background-image: url(image1.jpg);
    }
    
    a:hover {
      background-image: url(image1.jpg) -20px 0;
    }


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
  •