Using Absolute Positioning to make certain parts of an image into links???

Discussion in 'HTML & Website Design' started by BannanoPeel, Apr 24, 2011.

0
  1. #1
    I’m certain I have seen this somewhere, but I am currently struggling to accomplish it.
    I am making a informative website about computers (just a little fun side project I’ve been working on). I want to have one picture of a computer with its case open so that you could see all the components. Then somehow using position: absolute and anchors I want to have it so you can click on a component and then go to that webpage.

    Is there any tutorial out there to help me with this? Right now I am really confused about positioning with the top, left attributes. How can I make it so that the image’s position stays the same no matter what the users screen resolution is?
     
    BannanoPeel, Apr 24, 2011 IP
  2. om39a

    om39a Peon

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It is related to positioning in css. By making it fixed, image u needed will remain fixed.
    U can make this image to appear in top by setting the z-index attribute.
    z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
    div_image.pos_fixed
    {
    position:fixed;
    z-index:100;
    }
    Google for css positioning. U can find some decent tutorial on http://www.w3schools.com/
     
    om39a, Apr 24, 2011 IP
  3. blakeembrey

    blakeembrey Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You probably don't want to use fixed positioning because the fixes to the browser window, not the image. What you need to do is make a div element with the height, width, background and position:relative elements.
    E.g.
    div_image {
    position:relative;
    width:300px;
    height:300px;
    background: url(http://example.com/image.jpg);
    }

    Then with each of your links you just need to set where on the image it needs to be. So, inside of the div you put a link and set it to where it needs to be. This one will need position:absolute set.
    E.g.
    a {
    position:absolute;
    left:30px;
    top:55px;
    }

    By setting the position:relative in the first div, it makes sure everything inside of the div calculates it's distance via the div, instead of the browser window or anything else you may hav set to position:relative. If you need more help, feel free to PM me.
     
    blakeembrey, Apr 24, 2011 IP