Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Turning Background Images w/ hovering into links

    Hello,

    I am fairly new to coding and wanted advice on how I can go about doing 2 things:

    1) Turning a series of images into background (non clickable) images and have the images change when hovered on, respectively.

    2) Making these background images link to other pages.

    Here is a perfect example of what I mean: http://www.craigearl.co.uk/

    I have checked the source code but was not able to figure out where the key information was as to how this effect was achieved.

    One of the reasons I want to achieve this is because I noticed, and I might be wrong, that websites with images turned into background images tend to load faster. Let me know if thats right as well.

    Thanks in advance for your help
    Last edited by redfoo; 04-06-2012 at 08:35 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Well, what it looks like that site has done is created 4 images that are twice as wide as you can see. It then offsets them by 50% on hover.

    Code:
    a#nav-people:hover, a#nav-landscapes:active, a#nav-landscapes:hover, a#nav-landscapes:active, a#nav-bands:hover, a#nav-bands:active, a#nav-everyday:hover, a#nav-everyday:active {
      background-position:-160px 0;
    }
    These images are called an atlas. The "-160px" is specific to the layout of the source image.

    There are dozens of ways to make an image clickable. It really depends on what your other needs are.

    Now, the altering of the background of the entire page is more tricky. You have to delve into javascript to do that.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello redfoo, M.Jackson also ...


    I'm not sure I've ever heard it refered to as atlas. See CSS image sprites here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    You can build the sprites as mentioned by Excavator super easily by visiting this link: http://draeton.github.com/stitches/

  • #5
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    A sprite is a single image on an atlas.

    A 'sprite-sheet' refers to a specific type of atlas where all the sprites are exactly the same size.

    Edit: I once lost a fight with an artist over this...
    Last edited by M.Jackson; 04-07-2012 at 05:56 PM. Reason: More info...


  •  

    Posting Permissions

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