#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    New York! WHEE!
    Posts
    2
    Rep Power
    0

    Turn a picture into a link using CSS


    Greetings... I just joined this forum, it looks muy helpful. I have a small question:

    I have a picture that I put onto my site (well, my neopets userlookup --feels childish--) with CSS. The code I used was (hopefully this will show up, I'm not sure if it will):

    <style type="text/css">
    i.anypic1{background:url(http://members.aol.com/roseswillows/images/caitlin.jpg);height:600;width:800;position:absolute;top:0;left:0}
    </style>
    <i class="anypic1"> </i>

    I'd like to be able to make that picture into a link. Is it possible to do that somehow?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    I'm a bit confused by your coding.

    The <i> tag is for Italic text.
    The CSS you have assigns a background URL to the <i> tag.


    The basic way to assign a link to an image is this
    Code:
    <a href="http://www.url.com"><img src="image.jpg" alt="my image"></a>
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    New York! WHEE!
    Posts
    2
    Rep Power
    0
    see, that's the thing: that's HTML, isn't it? or am I just extremely confused? I know that code well enough, but if I use it, I can't position the picture where I want it, becaue that requires CSS. this is frustrating...
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    CSS & HTML are to be used together
    You can add CSS to any element by using the style attribute.

    Code:
    <a href="http://www.url.com"><img src="image.jpg" alt="my image" style="height:600;width:800;position:absolute;top:0;left:0"></a>

IMN logo majestic logo threadwatch logo seochat tools logo